Floating/width problem

programming web dev
1

Ok guys,

I have a HTML template that I have to use to make multiple themes out of using CSS. So to let you know right from the start, I cannot change the HTML. With this module you are able to Hide/Show the ‘nav’ div with a link in the ‘mid_bar’ div (Hide Menu, Show Menu).

Here is some sample HTML:


<div id="container">
  <div id="header">some stuff</div>
  <div id="mid_bar"><a href="#">Hide Menu</a></div>
  <div id="nav">nav<br />nav<br />nav<br />nav</div>
  <div id="content">content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content</div>
  <div id="footer">some stuff</div>
</div>

…and here is the sample CSS:


html, body {
    background: #333;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 90%;
    margin: 0;
    padding: 0;
}

#container {
    background: #fff;
    display: block;
    width: 1000px;
}

#header {
    background: #900;
    display: block;
    float: right;
    height: 60px;
    width: 800px;
}

#mid_bar {
   background: #090;
    display: block;
    float: left;
    height: 60px;
    width: 200px;
}              

#nav {
    background: #009;
    clear: left;
    display: block;
    float: left;
    width: 200px;
}

#content {
    background: #990;
    clear: right;
    display: block;
    float: left;
}

#footer {
    background: #099;
    clear: both;
}

What I’m trying to do overall is have a ‘false’ 100% height menu bar (using the ‘container’ background color), and with that said, I can’t seem to get the ‘content’ to fill all the way to the right edge of the ‘container’ when the ‘nav’ is present nor when it is hidden. It seems to only be the same width as what is inside of it.

If this is confusing at all, I can try to re-word it. But any help would be greatly appreciated!

Thanks :smiley: