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"> </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; }