Выравнивание по правому краю двух столбцов теряет горизонтальные полосы прокрутки

Я хочу раскладку с двумя выравниваемыми справа столбцами. Таким образом, я создал три дивы (две колонок и обертку):Выравнивание по правому краю двух столбцов теряет горизонтальные полосы прокрутки

<div id="wrapper"> 
    <div id="left"> 
     First column 
    </div> 
    <div id="right"> 
     Second column 
    </div> 
</div>

Я плавающий left Див слева, right Div права, и установить правильные ширины для всех три дивы:

#wrapper{ 
    width:30em; 
} 
#left{ 
    float:left; 
    width:10em; 
} 
#right{ 
    float:right; 
    width:20em; 
}

все это выглядит так, как ожидалось ...

Without floating the div http://img690.imageshack.us/img690/5844/rightrightalign.png

..но я переправил wrapper DIV вправо И ни WebKit, ни отображать Firefox горизонтальные полосы прокрутки, если это необходимо:

Without the right align http://img690.imageshack.us/img690/8559/withoutrightalign.png

То же самое происходит, если я использую position: absolute; right:0

Полный пример HTML документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
    <style type="text/css" media="screen"> 
     #wrapper{ 
      width:30em; 
      float:right; /* The problem line */} 
     #left{ 
      float:left; 
      width:10em; 
      background: green;} 
     #right{ 
      float:right; 
      width:20em; 
      background: red;} 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="left">Left</div> 
     <div id="right">Right</div> 
    </div> 
</body> 
</html>

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

источник

2010-02-08 dbr

Thhat's * weird *! Я тестировал его локально на FF в Windows 7. Я удалил doctype и добавил 'overflow: auto' в тело, все безрезультатно. Я удаляю свой ответ, поэтому вопрос привлекает больше внимания. На самом деле интересно, почему это так. –

Вы не хотите, чтобы плавающие для этого. Вот что вы ищете:

#wrapper{ 
    width:30em; 
    margin-right: 2px; 
    margin-left: auto; 
    } 
    #left{ 
    float:left; 
    width:10em; 
    background: green; 
    } 
    #right{ 
    float:right; 
    width:20em; 
    background: red; 
    }

источник

2010-02-09 17:19:18 Julik

Ага, кажется, работает отлично, спасибо! – dbr

Вы можете сделать это с помощью таблицы с одной строкой. Я только проверял Chrome, но я думаю, что он будет работать везде. Трюк состоит в том, чтобы дать самой левой «пустой» ячейке ширину 100%, чтобы все остальное было направлено вправо. Сама таблица прибита к левому краю, а не к краю, поэтому, когда окно узкое, содержимое направляется вправо, и вы получаете полосу прокрутки.

stuff before the columns 
<table style="width:100%" border=1><tr> 
<td style="width:100%">(empty) 
<td valign=top><div style="width:10em">left</div> 
<td valign=top><div style="width:20em">right right right right right right right right right right right right right right right </div> 
</table> 
stuff after the columns

С поплавком: справа, или положение: абсолютная с правой: 0, содержание прибивают вправо, а когда окно узкое, оно просто исчезает от левого края. Argh.

источник

2010-02-08 09:19:18 awhyte

Хотя это возможно, вы не должны использовать форматирование таблицы для макета страницы, отличного от таблицы. В снимке четко отображаются панели навигации и контента, а divs - лучший способ перейти сюда. Синтаксис таблицы строго следует использовать для таблиц. – 08Hawkeye

Found an explanation of why this is happening:

Я не верю, что есть какой-нибудь способ обойти это без использования JavaScript. Браузер отображает страницу относительно левого верхнего угла этой страницы, поэтому все, расположенное выше или слева от этой точки 0,0, эффективно за пределами экрана. Все переполнения происходят со снизу и справа. То же самое происходит с содержимым внутри любого элемента блока. Поэтому, если у вас есть элемент, расположенный по отношению к правой стороне страницы, ширина более 100%. Часть слева от точки отсчета 0,0 будет просто за кадром

источник

2010-02-09 16:17:48 dbr

Выравнивание по правому краю двух столбцов теряет горизонтальные полосы прокрутки

ответ

Смежные вопросы