I often run in the following problem, I have a web page with the following divs:

• header
• sidebar开发者_开发技巧
• content
• footer

sidebar and content are both float left with a break afterwards.

I want content to expand to the right edge of the browser, no matter how wide or narrow the browser width.

However, no matter what I try, I am face with two choices:

• content must be a fixed width
• content is not a fixed with (no width property) but resizing the browser pops the content down under the sidebar

The site I'm working on has many more divs than these four so it's hard to post CSS code that is not convoluted, but does anyone have a general strategy to enable content to expand out to the browser's right edge while never popping under sidebar if browser width is made too small?

My current solution is: table.

Addendum 1

Thanks Hristo, your solution works except that sidebar and content can't have fixed heights, which causes the footer to appear in the middle. Since you aren't using floats, how do you make the footer come after both of them?

---

You should be able to set a margin-left to the #content and position:absolute to the #sidebar.

For example:

<div id=wrap>
  <div id=content>
    ...
  </div>
  <div> id=sidebar>
    ...
  </div>
</div>

and some css

  * { 
      margin: 0; 
      padding: 0;
  }
  #content {
      margin-left: 200px;
      background: green;
  }
  #sidebar {
      width: 200px;
      position: absolute;
      top: 0;
      left: 0;
      background: pink;
  }

and the example: http://jsbin.com/umomuk This is the same solution that google uses on their search result pages.

---

UPDATE

http://jsfiddle.net/UnsungHero97/ABFG2/10/

---

Check out the fiddle...

http://jsfiddle.net/UnsungHero97/ABFG2/2/

Let me know if you have any questions. I hope this helps.
Hristo

---

On solution will be to use the minimum width:

.containerDiv {
  min-width: 600px;
}

if the div is greater than 600px it will just expand, and if the window is resized to a lower value the minimum width will be 600px. However, some versions of IE doesn't support this property, a different solution will have to be implemented for IE.

This link suggest a hack, but i have not tested that personally.

CSS play