[thelist] CSS -- two divs inside a horizontally centered div of fluid width

[shawn allen]

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