View Full Version : Getting divs to run to the same length when resizing

07-14-2010, 06:12 PM

The anwser to this may be, that I can't and that it's one of the compromises to be made with a resizable page and that if everything has the same colour background I don't need to worry - but I'll ask anyway.

here is a page under development:


I have 3 divs with the middle one being resizable for different screen sizes.

I would like the 3 columns to expand lengthwise to the same length so that they always sit on the same line at the bottom so the graphic background is in line but obviously as I resize, the middle one's height changes and the left and right are fixed because they are set to auto and have expanded as long as they need to to contain their content.

Any suggestions or is the answer "no way" or is there something staring me in the face that i haven't seen?

Many thanks

07-15-2010, 01:47 AM
not certain how the 'columns ' are distinguished, but if they are coloured, you can use an image repeated in the parent div and this will give an impression of equal length to the collumns ,

07-15-2010, 10:25 AM
Ahhhhhhhhh, I wondered about something like that, create a 1 px high watermark or something along those lines to include the rh column graphic
As usual, sort of staring me in the face, thanks for your tip, I'll try it.

07-15-2010, 07:16 PM
This is the slickest solution I've seen but d*** it's a lot of work: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

07-15-2010, 09:20 PM
That is really clever and "not staring me in the face" so I don't feel too bad.
It definitely solves my problem so I can't wait to get on it tomorrow morning.
And a really nice site and explained really simply - we could do with more of that sort of thing.
Cheers for that.

07-16-2010, 01:10 AM
thats a good layout . for three columns usually layout as a wrapper, with bkg image left.

then a column 1 same width as as bkg image, i then float next to that a div filling the rest ( so if col 1 is 30 % it will be 70%) and add a bkg image positioned right same width as column 3 will be.

then inside of that div float your 2 remaining columns.