Укажите правую границу в фиксированном позиционировании

Я понятия не имею, как правильно это обозначить, но вот моя проблема:

У меня есть этот макет:

<html>
<body>
    <div id="content">this is my page</div>
    <div id="button">magic button</div>
</body>
</html>

css:

#button {
  position: fixed;
  bottom: 20px;
  background-color: #f00;
  padding: 5px;
  left: 50%;
  margin-left: 250px;

}

html, body{
  height: 100%;
}
#content {
  margin: 0 auto;
  width: 700px;
  min-height: 100%;
  background-color: #eee;
}

Смотрите здесь скрипку: http://jsfiddle.net/n6UPF/

Моя страница работает так, как я ее хочу, кнопка именно там, где я хочу.

Но, если я изменил текст на моей кнопке, он больше не будет правильно установлен.

Я бы поставил его "исправленным" относительно правого края области содержимого.

Можно ли это сделать в чистом CSS?

Ответы

Ответ 1

Если изменение HTML допустимо, вы можете использовать обертку:

<div id="button-wrapper">
    <div id="button">magic button</div>
</div>

#button-wrapper {
    bottom: 40px;
    left: 50%;
    margin-left: 350px;
    position: fixed;
}

#button {
    background-color: red;
    padding: 5px;
    position: absolute;
    right: 10px;
    white-space: nowrap;
}

http://dabblet.com/gist/3740941

Нет, это не очень красиво, но...

Ответ 2

Я не уверен, правильно ли понял ваш вопрос, но не мог ли вы использовать свойство right вместо left?

Пример: http://jsfiddle.net/baKra/

Ответ 3

Обычно, когда я сталкиваюсь с проблемой с точным позиционированием, это потому, что я не указал ширину моего позиционированного элемента. Браузер попытается вычислить его сам, и это может отбросить вещи.

Есть ли способ опубликовать то, на что он похож, когда он больше не позиционируется должным образом?

Ответ 4

Вы имеете в виду...

#button
{
    position: fixed;
    right: 20px;
}

... или любое другое расстояние, которое вы хотите справа? Или что-то еще?

Ответ 5

Мне интересно, ищете ли вы свойство float: right. Вы можете посмотреть http://jsfiddle.net/n6UPF/1/ и посмотреть, что именно вы искали.

Ответ 6

Попробуйте изменить

#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
left: 50%;
margin-left: 250px;
}

#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
right:20px
}