1

I have a design that has a left side bar and a main content well on the right. On most pages on the site, the left sidebar is taller than the content well, but for a few pages, the content well is very tall and the sidebar is left floating with no bottom.

I have created a piss poor example of what I'm talking about here:

http://www.pmind.com/staging/pisspoor.html

I remember years ago the answer was to just assign a background image that would fake it, i.e. in my example just make an image that had a green bar down the left side of it and make that the background to the main red div. And I know this is a common want for websites to have areas that span 100% of the browser window, so you can make HTML and BODY be 100%, but in this case, the area is capped by the header and footer so the browser's dimensions aren't a factor, I just want the green div to be the height of it's parent red div. Is this still a pipe dream with CSS2.1 and lower?

John Hartsock
  • 85,422
  • 23
  • 131
  • 146
Michael Davis
  • 219
  • 2
  • 12
  • Possibly related to http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-height – simshaun Dec 22 '10 at 22:42

2 Answers2

1

You could use Javascript to do the job or you could set a min-height in CSS on the content:

#content {
min-height:500px;
}
DADU
  • 6,482
  • 7
  • 42
  • 64
  • If you view the source code of the example I've provided, the sidebar is a floating div, so assigning a min-height:100% declaration wouldn't do anything, and assigning a min-height declaration with a static value defeats the purpose of trying to make it grow dynamically. – Michael Davis Dec 27 '10 at 18:35
1

Here is a good example of div positioning. Here is a working example http://jsbin.com/izosi3

<div id="header" style="position:absolute; top:0px; left:0px; height:50px; right:0px;">
</div>
<div id="leftnav" style="position:absolute; top:50px; left:0px; bottom:50px; width:150px;">
</div>
<div id="content" style="position:absolute; top:50px; left:150px; bottom:50px; right:0px;">
</div>
<div id="footer" style="position:absolute; height:50px; left:0px; bottom:0px; right:0px;">
</div>
John Hartsock
  • 85,422
  • 23
  • 131
  • 146
  • This is a pretty simple and elegant way of doing that, I never realized you could set a top and bottom css declaration of 0 and the div would stretch like that. Unfortunately this solution only works if the "content" div has contents taller than the "leftnav" div. For the majority of the site in question, the "leftnav" div is the taller div. – Michael Davis Dec 27 '10 at 18:44
  • Actually, if the "content" div OR the "leftnav" div have content taller than the browser's viewport, this solution breaks entirely. – Michael Davis Dec 27 '10 at 19:19