更好的CSS div对齐（3列，中大）

Question

I want the main text of the html (div.main) to be near standard paper size (8.5inch - 1in margin on both = 6.5)

I want my sidebar menu to be outside of this. So i figured out how to lock the page to near 1024 res (i use 996px so i have room for the vertical scroll bar)

This looks fairly good at 1024 and 1280 width resolution but i am not sure about higher. Also maybe you guys have a suggestion how to better align this (keeping the 6.5in in the center)

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

Pixels are variable width, completely dependent on the viewing device. At extremes, for example, an iPhone is about 2 inches wide with 380px width. A typical 15" monitor is about 8 inches wide with 800px width. So an iPhone is about 4 times the resolution.

Furthermore, if you change the resolution of the same monitor - from 800x600 to 1024x768 - you now have more pixels in the same physical space. This means that what showed as 7 inches before may now show as about 5 inches.

The only way to get around that is to use pt s instead of px s. 72pts is roughly 1 inch. I personally never use pt s, but have heard browsers are very inconsistent in their treatment of CSS that uses them.

To answer your specific question, therefore, you would need to use a fixed size overall on the page that is enough to contain your sidebar and your #main div. Float one to the left, and the other to the right.