[thelist] How Do I Make Floating Div Heights Match?

David Laakso david at chelseacreekstudio.com
Sun Mar 14 18:25:09 CDT 2010


Rachell Coe wrote:
> Hi All!  I have 3 floating divs at http://senderswines.server302.com that
> not only need to have the same heights, but ALL of them need to be able
> expand the same amount downward whenever one of them has a lot of content.
>
> TIA!
>
> Rachell Coe
>   


It can be done purely with css [1], [2] however these methods are 
sometimes difficult and problematic unless thoroughly checked 
cross-browser and adjusted accordingly and correctly.

A somewhat less difficult method is to use the "faux column [3]" method 
-- an image to create the full height illusion.
Leave the current image you have in the left/right columns.
Assign the img to #wrapper but rename it #wrapper -1 set img at top left 
repeat-y.
Create a new wrapper called #wrapper -2 set to open immediately after 
#wrapper-1 and to close immediately before #wrapper-1: assign the same 
img top right repeat-y.

[1]
<http://www.positioniseverything.net/articles/onetruelayout/equalheight>
[2]
<http://www.satzansatz.de/cssd/companions.html>
[3]
<http://www.alistapart.com/articles/fauxcolumns/>

Best,
~d



-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/



More information about the thelist mailing list