2 replies [Last post]
hydra
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2006-01-04
Posts: 2
Points: 0

Hi,

Hopefully someone will know the answer to this because I'm stumped. I've been trying to create a good replacement for HTML tables using only CSS. This I have managed to do alright, but there is one small thing missing.

Say there were two "cells" next to each other, a left and a right. If the left "cell" had more content in it than the right (making it taller than the other). How could you force the right "cell" to fill all the available vertical space making the two "cells" appear the same height even if the amount of content in each was different (and of unknown height in the first place)?

The right and left "cells" are both floats if this makes a difference. The left "cell" is to contain top-left aligned text and the right to contain a completely centered image.

I'm trying to achieve this without using a background image on one of the parent containers to simulate a stretched background, to give more control over the individual "cells".

Any suggestions would be gratefully appreciated.

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 48 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Filling all available vertical space

A much though about problem - try reading this, it's still the standard aproach to this problem as far as I know.

http://www.alistapart.com/articles/fauxcolumns/

hydra
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2006-01-04
Posts: 2
Points: 0

Filling all available vertical space

Thanks briski for the very fast reply.

That article does help my dilema and is explained much better than some I have read which may lead me to change my mind about the background image after all.

However I still cannot find a way to reliably vertical fill all the space in the right floated "cell" so that I can center the image in it.

Any ideas?