1

I'm trying to do this thing that apparently causes a lot of people headaches, and I've found some near-solutions, but not quite what I need. I want to have a left sidebar div and a right main content div. Beneath those, a footer. In the sidebar, I want to run a strip from the top to the bottom of the div, filled with a background image, and I want it to stop above the footer, matching the height of the main content div, however tall or short.

If you want to see what I'm after, I put up an example page at http://lumn.net/about.html . None of the links are active and the code is extremely messy -- I'm literally teaching myself css just this week. But at least you can see the layout I'm envisioning.

I've tried declaring a bunch of "height:100%" from <html> down through the div in question, and that got it to stretch for the full page, but not to match its parent's height. Using "height:100%" only on the "strip" div and its parent doesn't appear to do anything. I also tried "position:absolute;top:0;bottom:0", which, too, did nothing. The div disappears (because it has nothing in it but the background image).

Then I tried a jQuery plugin I found at http://www.cssnewbie.com/equal-height-columns-with-jquery/ , but either I didn't know how to call it correctly, or something in my page prevented it from working.

Flimzy
  • 60,850
  • 13
  • 104
  • 147
poetiscariot
  • 179
  • 1
  • 2
  • 12
  • So your problem then is the sidebar not stretching to the footer? You question is a little hazy on exactly what your problem is. – JT Smith May 05 '12 at 00:43
  • Yes. I can only get it to show up at all if I declare a height in pixels. I'd like it to stretch longer on longer pages, shorter on shorter ones. – poetiscariot May 05 '12 at 00:59

2 Answers2

0

How about you just put the sidebar as the background image inside the content div and use 

background: url('image.jpg') repeat-y;
padding-left: 210px;

on the main content div to make it run down the left. Like this: http://jsfiddle.net/JMC_Creative/dMbmP/

I know that doesn't give a result exactly like your example page, but would you be able to extrapolate something from that to work for you?

JakeParis
  • 10,471
  • 3
  • 34
  • 63
  • Need `repeat-y` since it's vertical (as you have it in your fiddle as well.) `Repeat-x` won't work. – JT Smith May 05 '12 at 00:53
  • Bumping the background over like that hadn't occurred to me. I think I still need the div to be the shape of the strip itself so I can make the shadow happen, though. – poetiscariot May 05 '12 at 01:05
0

In order for relative sizes to work properly, you must specify "position:relative" for the parent and child objects, and the parent must have specified height, either static, relative or absolute.

Secondly, you want fluid same-height columns, so you need to make a main column, then the side columns need to exist as children of the main column. Then simply declare a negative left-margin for the left column and a negative right margin for the right column. That's the trick everyone uses.

Jamie
  • 113
  • 1
  • 5
  • I'm not seeing how this works, either -- could you give an example? I don't think any of the variations I've seen use margins that way. – poetiscariot May 05 '12 at 19:56
  • Check this out, it's called [liquid layout](http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/). the idea being that the column needs to be the child of the center column in order to receive its attributes, but this does not necessarily mean it has to be literally _inside_ the parent column. – Jamie May 08 '12 at 16:19