Forum Moderators: not2easy

Message Too Old, No Replies

height with % based design

         

SharingDOODLES

5:54 pm on Dec 8, 2006 (gmt 0)

10+ Year Member



i have got a 3 colum layout at various sizes, is there a way i can have all the boxes change together horizoatally when the page is re-sized,

at the moment it looks abit messy because they fall out of line at the bottom when the page is re-sized

is there a way around it?

Fotiman

7:26 pm on Dec 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Try searching for faux columns. Essentially, you give the background an image that looks like it separates the columns, so even if your blocks don't fill the columns, they still appear to. For example, suppos you have a background images like this:


+--------------------------------------+
¦,,,,,,,,,,,,¦............¦````````````¦
+--------------------------------------+

Now suppose you apply that background to a container and tell it to repeat-y. Inside that container is your column items.


+--------------------------------------+
¦+-col1-----+¦+-col2-----+¦+-col3-----+¦
¦¦,,,,,,,,,,¦¦¦..........¦¦¦``````````¦¦
¦+----------+¦¦..........¦¦¦``````````¦¦
¦,,,,,,,,,,,,¦+----------+¦¦``````````¦¦
¦,,,,,,,,,,,,¦............¦+----------+¦
+--------------------------------------+

In this example, col2 is longer than col1, and col3 is longer than col2, but the background image behind them all gives the impression of equal height columns. Since they are not REALLY columns, this is called "Faux Columns".

Hope that helps.