[thelist] CSS -- two divs inside a horizontally centered div of fluid width
shawn allen
shawn at alterior.net
Fri Feb 7 16:28:00 CST 2003
quoth Rachel Cunliffe:
> I'm banging my head over this one -- there has to be a simple way of
> getting this to do what I'm after :)
>
> Hopefully this explains what I'm wanting:
>
> <div id="main"> # width 80%, centered on page
> <div id="sidemenu"> # 120px wide, on the left
> ...
> </div>
> <div id="content"> # fills up the rest of the 80%, on the right
> ...
> </div>
> </div>
Try this:
body { text-align: center; }
#main {
width: 80%;
margin: 0 auto;
text-align: left;
position: relative;
}
#sidemenu {
position: absolute;
left: 0;
top: 0;
width: 120px;
}
#content { margin-left: 120px; }
Some problems you might have:
- IE/win 4.x may flummox this very simple layout for no apparent reason.
Don't even try it with Netscape 4.x.
- if the calculated height of #sidemenu is greater than that of
#content, the contents of #sidemenu will spill out the bottom of #main
Cheers,
--
shawn allen
mailto://shawn@alterior.net
phone://415.577.3961
http://alterior.net
aim://shawnpallen
More information about the thelist
mailing list