css columns: use available width

Question

Anyone know a way to make it so that when the menu div is omitted, the main div uses all the available width?

    +-------------- container -------------+
    |  +--- menu ---+  +---- main ------+  |
    |  |            |  |                |  |
    |  |            |  |                |  |
    |  +------------+  +----------------+  |
    +--------------------------------------+



    +-------------- container -------------+
    |  +------------- main -------------+  |
    |  |                                |  |
    |  |                                |  |
    |  +--------------------------------+  |
    +--------------------------------------+

Answer 1

<style type='text/css'>

.menu { 
       float: left;
       min-width: 20%; /* fix this to your happiness */
}

.main:after {
       content: "."; /* foo */
       display: block; 
       visibility: hidden;
       clear: both;
}

.main {
       width: 100%;
}

.menu + .main { 
       float: left; /* you can also make this right (play with it a bit ) */
       width: 80%;  /* work this out with happiness above !(see notes below) */
}

.menu[display=hidden] + .main {
       width: 100%;
}
</style>

<div class='container'>
<div class='menu'>
    Menu Content
</div>
<div class='main'>
    Main content
</div>
</div>

NOTES:

OK so one thing you have to worry about is the following, if you put any borders around these divs then you would have to reduce the width by a bit to account for the width of the borders.

A good way to actually ensure proper look-and-feel this is to treat these as container classes and put the actual content divs inside them.

The .main:after { } is to make the .main float properly in case you are containing this inside another div and then you have content below. The :after injects a block in there that ensures you won't have to remember to put "clear:both" in the style for following block element (that presumably you want below this set)

Hope this helps.

Answer 2

Untested, as I'm typing this from my phone:

<div id="container">
 <div id="menu" style="float:left;width:100px;margin:0 auto;height:100%"></div>
 <div id="main" style="float:right;width:auto;margin:0 auto;height:100%"></div>
</div>

Answer 3

Use 100% width on the main. E.g.

CSS

<style type="text/css">
  #container {
    width: 300px; /* Fixed container width */
    height: 400px;  /* Height, just as an example */
    border: 1px solid red; /* Just to show the border of the container DIV */
  }

  #menu {
    width: 100px; /* Fixed menu width */
    height: 100%; /* Fill the height of the container */
    float: left; /* Float to the left, so the main can take the space to the right */
    border: 1px solid green; /* Just to show the border of the menu DIV */
  }

  #main {
    width: 100%; /* Fill the remaining width */
    height: 100%; /* Fill the height of the container */
    border: 1px solid blue; /* Just to show the border of the main DIV */
  }
</style>

HTML

<div id="container">
  <div id="menu">Menu</div>
  <div id="main">Main</div>
</div>

Example with menu.

Example with hidden menu.

Edit: Just fixed the CSS comments.