View Full Version : Repeat background to fill height

09-23-2007, 03:13 AM
Hi all,
I have to divs inside a wrapper, one floated left, the other right (so a two column layout). The background on these two divs repeat vertically. The problem is I would like both sides to repeat the same height depending on the other...And what I mean by that is if there is a lot of information in the right div and the background repeats a far way down...I would like the left div to repeat the same length as well. How do you do this?
Thanks, Matt

09-23-2007, 03:19 AM
I haven't looked into faux columns for a while so maybe what i will suggest is similar or identical.

Give you main div a background colour. make each internal div have background: inherit

then if each or either div runs longer than the other, the background colour will run down more, making it look like all is normal.


09-23-2007, 03:25 AM
I don't quite know what you mean? You mean have the wrapper div have a background color and then the two floated left and right divs inside the wrapper have height:inherit? The problem is I'm using images as backgrounds that have drop shadows, so a background color wouldn't work...

Here's a link to it:


09-23-2007, 03:51 AM

Welll at least FF and IE 7 are consistent ;) But i don't see a connection :(

I se what apears to be an image - "this side up" and then I see what appears to be another div with a white background.

why not make 'this side up' be an image with the drop shadow and make the background colour of each div be #fff; ?


09-23-2007, 04:02 AM
Sorry I wasn't clear enough...

Look below the This Side Up logo. That whole top portion (the height of the This Side Up logo) is a header so disregard that, I'm not having a problem with that.

Below that I have two divs, one floated left and one floated right and they are both inside a wrapper div. They both have background images (that have a white background, but also include a drop shadow on the right or left respectively so that the drop shadow drops over the background of the document).

The div I have floated right has a height of 400px and the background image is repeated vertically so that it fills up the 400px. The div on the left, however, I have not set a height. This is because I would like this sides background to repeat vertically to the height of whatever the div on the right is. The problem is the div on the left will not repeat the background to the height of the right div...but that's what I want it to do. So if I add extra information the right div, the left div will lengthen respectively.

Does this make it clearer? I want both divs backgrounds to repeat the same height dynamically...so if I have more infomation in one and it lengthens that div, I want the div on the opposite side to also lengthen (and repeat its background) to that same height.

Thanks, Matt

09-23-2007, 04:40 AM
Javascript, that is my suggestion. I'm not sure if you want to use js but I think it would be your best bet.

09-23-2007, 04:48 AM
Is JS the only way? I would rather not use JS...

What about this:


I don't really understand it and tried it quickly but didn't seem to work...does this seem like a viable option?

09-23-2007, 04:58 AM
Ok I was able to figure it out.

I followed this html source:


Putting this code in the inside divs:

margin-bottom: -2000px; padding-bottom: 2000px;

and then overflow:hidden in the wrapper div.

Worked like a charm!