Multi-Column And Multi-Row Layout

[chong]

Hi, am looking for a solution for stretching multicolumns to the same height. I am aware of the solution for multicolumns, whereby a container is used to display the column backgrounds, but am stuck with the current situation:
http://movingmouse.com/NHB

This case, as u can see, has multiple divs in the central column as well, so the situation is a bit tricky.
When the central 2 divs stretch, I could easily make the columns on either sides stretch too by containing their backgrounds in the containing div. But when the side columns get longer, I can't do the same on the central column, since the backgrounds of the 2 divs in the centre are not the same... Not sure if anyone does understand this...

Any help is appreciated, TIA!

[ray326]

Looks like the Holy Grail article at A List Apart might do you some good.

[chong]

Hi ray, unfortunately, those articles focus primarily on the question of multi columned design which is not the crux here. The main difference here is that there are multiple "rows" in my central column. And these rows have to "grow" to the height of the 2 sides when they are longer.

Any more ideas?

[ray326]

I guess I don't see what the content of the center column has to do with it as long as the everything is coded to flow correctly.

[chong]

Let me explain a little bit, I need the columns to be equal-height

Thus, if the contents on either sides are longer than the central column, the central column will have to extend to the height of the sides. In particular, the background of the 2nd div in the central column is gonna be the one being stretched.

Normally, I could juz use a background image on the container containing all three columns, and this image would tile vertically down giving the illusion of equal height. However, the central column is made up of 2 divs, so it is not a case of a common background.

Am I clear, or am i making it more confusing?

[Gaurav Khanna]

Hi i think as u mention three columns and all r inside the div layer and u want that when one column increase it height the other columns is also increase its height also.

So do one think just have 3 div layer one for right column, one for central column and one for left column.

copy the code below paste it in every web page.
-----------------
div
{
heght: auto;
}
------------------

you can change the height according to u r content.

[chong]

setting height auto would aggravate the situation, as the height of each column will only grow to fit the contents instead of being all equal.

I have uploaded the version of the page which is problematic, do visit and take a look to appreciate the situation better:
http://www.movingmouse.com/NHB/

In the page, the central and right columns are shorter than the left one. Normally to give the illusion of equal columns, I could apply the columns' background image as the background image of the containing div, and set it to repeat-y.

However, if you have visited the page, you will see that the central and right columns are both made of multiple "rows", which have different backgrounds.

Thanks to all who made suggestions, but they are still not really touchin on the problem yet (or maybe i'm juz dense... :D )

[Gaurav Khanna]

Hi i go through the view source of u r web page.
To solve the problem u have to define the height of the style manually in css and define class tag in the div layers

.divheight
{
height: 400px;
}

now make the changes in the height size according to u r page look.

Call the above tag in
<DIV id=leftcol class="divheight">
<DIV id=centercol class="divheight">
<DIV id=rightcol class="divheight">

[chong]

thanks gaurav for ur suggestion... but i'm looking for a non-hardcoded solution if possible...
as it would really be a hassle to update the height whenever more contents roll in...

any more suggestions?

thanks to all so far :)

[bokeh]

any more suggestions?Do a search for Faux columns.

[pcthug]

Do a search for Faux columns.
http://www.alistapart.com/articles/fauxcolumns/

[chong]

Had read that, but the solution doesn't apply to my problem set, as I stated earlier, becos my columns have multiple "rows"... so columns dun have a single background...

Followed gaurav's suggestion to hardcode the height of the individual divs as a temp solution... but pretty tiresome to adjust pixel by pixel (not that there is much of a choice)

May consider using javascript if css can't do it automatically (tho i suspect it can)

[bokehman]

Post a photoshop picture of your layout so we know what you aree talking about. I sounds simple to me.

[chong]

here is the troubled pic:

screen shot (http://movingmouse.com/cheewai/sshot1.jpg)

:D