Making right div repeat background based on left div's height

Question

I have two div's in a container div, one floating left, one floating right. I have a php function for a search engine that spits out results, into the left div. what I need to do is have the right div repeat the background based on the height of the varied results on the left div. I have no idea how to go about this, any ideas?

Right now it looks like this:

left div content right div background
left div content right div background
left div content right div background
left div content
left div content

what I need it to do is base it's repeat-y off of the content in the left div so it looks like this

left div content right div background
left div content right div background
left div content right div background
left div content right div background
left div content right div background
left div content right div background

EDIT: The only solution I can think of right now is to spit out a blank line in the right div for every link in the left div, i'd like to avoid that, which is why i'm asking for a different solution.

EDIT 2: Thought of another way via javascript, to just detect the height after the div is loaded into the page, and reassign the height of the left to the right. something i'd like to avoid but hey what can ya do.

vise vise · Accepted Answer · 2009-11-19T10:31:42

As a pure css solution you can use faux columns. Basically it implies using background repeat on the parent to mask the div height. It's an ugly hack, but works surprisingly well for most scenarios.

Or you can use javascript:

var box1 = document.getElementById('left-div');
var box2 = document.getElementById('right-div');
var height = box1.offsetHeight;
if(box1.offsetHeight < box2.offsetHeight) height = box2.offsetHeight;
box1.style.height = box2.style.height = String(height) + 'px';

Making right div repeat background based on left div's height

2 Answers