css layout question (about columns)

Question

I have this HTML structure

<div id="header">
    …
</div>
<div id="menu">
    ...
</div>
<div id="content">
    ...
</div>
<div id="footer">
    ...
</div>

And the CSS:

#header {
    height: 100px;
}

#footer {
    border: 1px solid #989898;
    padding-bottom: 0.1em;
    width: 100%;
    height: 2.2em;
    position: fixed;
    bottom: 0px;
    left: 0px;
}

#menu {
    width: 150px;
    float: left;
    ???
}

#content {
    ???
}

Header and footer are ok, but the question comes from menu and content divs:

'menu' div must fill from header to footer, without scrolling

'content' must show scroll if neccessary.

What CSS code for them will make it real?

Thanks

Answer 1

I've tried your answers but the result isn't satisfactory, so finally i've made the better solution for me:

http://jsfiddle.net/cVdeT/

Answer 2

I had such a problem a long time ago, hope this will help

HTML

<div id="wrapper">
  <div id="header">
    ...
  </div>
  <div id="menu">
    ...
  </div>
  <div id="content">
    ...
  </div>
  <div id="footer">
    ...
  </div>
</div>

CSS

#wrapper
{
  position: relative;
  ...
  ...
}

#header
{
   position: absolute;
   top: 0;
   left: 0;
   height: 100px;
}

#footer
{
   position: absolute;
   bottom: 0;
   height: XXXpx;
   display: block;
}

#menu
{
   position: absolute;
   top: 110px;
   left: 0;
   bottom: 0;
   width: 150px;
   height: 100%;
   display: block;
}

#content
{
   position: absolute;
   top: 110px;
   left: 160px;
   width: XXXpx;
   display: block;
}

Answer 3

My approach would be to wrap 'menu' and 'content' in a wrapper of their own like this:

<div id='contentWrapper'>
    <div id="menu">
        ....
    </div>
    <div id="content">
        ....
    </div>
</div>

Styled like this:

    #contentWrapper {
        width: 1000px;
        overflow: hidden;
        background-color: yellow;
    }

    #menu {
        width: 150px;
        float: left;
        background-color: transparent;
    }

    #content {
        width: 850px;
        float: left;
        background-color: white;
    }

The colours are there to illustrate. Actually, menu is still the same height as it always was, and will stretch around whatever you put in it, but it will always appear to take on the full height of 'content' because you can see through it, and its taking its background colour from the wrapper - which stretches around both menu and content.

Answer 4

try this

#menu { width: 150px; height: 100%; overflow-y: auto; display: block; }