Лучшее выравнивание CSS (3 столбца, средний большой)

Question

Я хочу, чтобы основной текст HTML (div.main) был близок к стандартному размеру бумаги (8,5 дюйма - 1 дюйм на обоих = 6,5)

Я хочу, чтобы мое боковое меню было за пределами этого. Итак, я понял, как заблокировать страницу с разрешением около 1024 (я использую 996 пикселей, поэтому у меня есть место для вертикальной полосы прокрутки)

Это выглядит довольно хорошо при разрешении ширины 1024 и 1280, но я не уверен насчет более высокого. Также, возможно, у вас, ребята, есть предложение, как лучше выровнять это (удерживая 6,5 дюймов в центре)

index.html

<div>
    <div class="menu">
    <ul>
    <li><a href="">Home</a></li>
    <li>Test</li>
    <li>Test 2</li>
    <li>Contact</li>
    </ul>
    </div>
</div>

<div class="row">
<div class="dummy">&nbsp;</div>

<div class="main">
lots of textlots of textlots of textlots of textlots of textlots of textlots of textlots of text
...
lots of textlots of textlots of textlots of textlots of textlots of textlots of textlots of text
</div>

<div class="sidebar">
Some links here</br>
<br>Some links here</br>
<br>Some links here</br>
<br>Some links here</br>
<br>Some links here</br>
</div>
</div>


</body>
</html>

my.css:

div.row
{
    width: 996px;
    margin-left: auto;
    margin-right: auto;
}

div.dummy {
    float: left;
    padding-right: 148px;
}

div.sidebar {
    float: left;
    padding-left: 32px;
}

div.main
{
    width: 6.5in;
    float: left;
}

.menu    { padding-bottom: 60px; }
.menu ul { margin:0px auto; }
.menu li {
    width: 22%;
    text-align:center;
    display:block;
    float:left;
    }
.menu a  { display:block; }

Answer 1

Пиксели имеют переменную ширину, полностью зависящую от устройства просмотра. Например, в крайнем случае iPhone имеет ширину около 2 дюймов и ширину 380 пикселей. Типичный 15 "монитор имеет ширину около 8 дюймов и ширину 800 пикселей. Таким образом, разрешение iPhone примерно в 4 раза больше.

Более того, если вы измените разрешение того же монитора - с 800x600 до 1024x768 - у вас будет больше пикселей в том же физическом пространстве. Это означает, что то, что раньше показывалось как 7 дюймов, теперь может показывать примерно 5 дюймов.

Единственный способ обойти это использовать pt с вместо px с. 72pts - это примерно 1 дюйм. Лично я никогда не использую pt s, но слышал, что браузеры очень непоследовательны в своем подходе к CSS, который их использует.

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