开发者

How to allow content area to be expandable to right but not pop under sidebar?

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

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.

How to allow content area to be expandable to right but not pop under sidebar?

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?

How to allow content area to be expandable to right but not pop under sidebar?


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜