Tableless design - height of divs

[Icheb]

I have replaced all tables in our current site's layout with divs and everything is working perfectly - except one thing: I have two, sometimes three, "cells". The left (cell A) is for the site's navigation, the middle one (cell B) is the content and if it's appropriate, there is a third cell (cell C) on the right with additional information.

Now, cell A and C have a different background color than cell B and I am really puzzled on how I could design it so that all two (three) cells have the same height.

It doesn't look that good when the left cell's background stops right in the middle of the page and the main content continues.

I don't want to hardcode each page's height, that would be inappropriate with that many (dynamic) pages.


Is there any way how this could be done?

[Paul_C]

See here for some techniques. This is probably close to what you want.

[Icheb]

Thank you very much, that code worked wonders .
Well, almost. If the content of cell B is shorter than the content of either cell A or cell C, the part below cell B is held in the background color of cell A and C.

Is there a way to have the "best of both worlds"?

[Paul_C]

Poke around some of the other examples there. Maybe this one is more to your liking?

[Icheb]

I looked through every example provided on that site, but each one has its own drawbacks.
Either it requires the main column to be the longest, the height of the outer columns don't matter or the outer columns must have a fixed width.

The only solution I found to my problem was to use the approach mentioned in post #2 and use <br />s, where necessary, to force the main column to be the tallest, although this is not exactly satisfying.

Do I have to stick with that dilemma or is there a different approach available?

[snorky]

I tried studying the examples that Paul gave in posts #2 & 4. When the headache goes away (and when I have time to actually study them in detail) - I'll try again.

I use two columns in my templates. For now, 2 quick questions:

1) Is there an easy way to adapt this concept to a two-column format?
2) Should I add a 'dummy' 3rd column 1px wide?

[devised]

So is it considered a bad design practice to use JavaScript to fix divs that will not stretch the length you want. If so, then could you explain why?

In my own experience with dealing with multiple columns of dynamic content, it sure makes it a lot easier by adding a function to do the resizing for me whenever I can not receive the desired effects by using CSS alone. However, I'd like to use strictly CSS.

[Paul_C]

The same concepts work fine in 2 column layouts, you don't need a dummy column.

What ends up needing to be done isn't actually stretching the columns to be of equal height - just making them look like they're equal height. You need a background color or border to stretch for the height? Then give a container element that does stretch for that height a background-image positioned to where that border or color should be and set it to repeat only vertically. Other elements can cover this up to complete the illusion.

[snorky]

can you give an example of code that will dynamically resize the divs?

[Icheb]

Please open your own thread for your questions, thank you. You wouldn't want your thread to be hijacked if you need help.

Back to my question: Is there a different approach or do I just have to stick with what there is on that site?

[Paul_C]

The divs don't resize. Check out the techniques I linked to earlier, don't just try to copy and paste what's there.

[Paul_C]

Icheb, there's always more than one way of doing things. If you link to an example (done in tables, or however) of what you're trying to accomplish with this it'll be easier to figure out.

[Icheb]

What I am looking for is a way to have three columns with relative width, both outer columns having the same background color and it is not always certain that the main column will be the longest.
With the approaches on the site you mentioned, I would either have to make sure the main column is always the longest or the outer columns would need a fixed width.

devised mentioned a way to do these things with Javascript. Would it be possible with it to draw the background color of the outer columns to the bottom, so the site wouldn't look much worse if a user with Javascript disabled browses the site?

Or is there another way with just CSS?

[Paul_C]

Offhand I can't think of any examples on the web already, but I'll noodle it over and see if I come up with something. To give me something to play with, what percentages do you have in mind for each column and will there also be a header or footer?

[Icheb]

It would be something like 15% - 65% - 20% . A header will be there (basically just the site's logo, but I don't have a height for that yet) and a footer is not necessaire, but it would be nice.

[Paul_C]

Well the idea I have is working perfectly in Opera 7, one part is broken in IE, and a different part is broken in Mozilla.

The theory was to have a wrapper div with the background set to that of the side columns. Directly inside would be the center column with whatever background you want and its width set to 50% (I decided to use some different numbers to make the example easier to put together 25% - 50% - 25%) and it's left and right margins set to 25%. Inside the div for the center column would be both side columns floated to either side with their widths set to 50% (bringing us to the 25% we wanted) and their respective left and right margins set to -50% (to put them into place). Then would come the content of the center column. Before closing the center column div add another div with "clear: both;" set to stretch the height of the center column to the tallest height of the three.

[Icheb]

Since the main portion of my audience uses IE, I can't really do it.
Is there some sort of Javascript which would "fill" the outer columns so the background goes to the bottom?

[devised]

Try putting this at the very end of your page and change the name of the divs to yours. It works for me in IE6 & Netscape 6.

<script type="text/javascript" language="JavaScript">
<!--

  if (document.getElementById("contentdiv").style.height <= document.getElementById("leftdiv").style.height) {
     document.getElementById("contentdiv").style.height = document.getElementById("leftdiv").offsetHeight;
  } else {
	   document.getElementById("leftdiv").style.height = document.getElementById("contentdiv").offsetHeight;
	}

-->
</script>

[devised]

Keep in mind that it will not work if someone has disabled JavaScript...

Also, I'm no JavaScript guru so if someone sees any way that it could be better, please point it out!!!

[Icheb]

How do I set the name of the divs? I tried it with name="leftdiv" , id="leftdiv" and also class="leftdiv", it doesn't work.

[devised]

I used id="leftdiv".

try writing it as a function and calling it with an onload and resize events:

<body  onload="stretchDivs();" onresize="stretchDivs();">


<script type="text/javascript" language="JavaScript">
<!--
function stretchDivs(){

  if (document.getElementById('leftdiv').style.height <= document.getElementById('contentdiv').style.height) {
     document.getElementById('leftdiv').style.height = document.getElementById('contentdiv').offsetHeight;
  } else {
	   document.getElementById('contentdiv').style.height = document.getElementById('leftdiv').offsetHeight;
	}
}
-->
</script>

If you have a lot of dynamic content, it can be slow loading, which is why I would like to figure out through css on how to handle to columns of dynamic content.

[Icheb]

That worked wonders!

Thank you!

But what do you mean with "If you have a lot of dynamic content, it can be slow loading" ?
I assume you are refering to displaying and hiding layers using Javascript? There is no other Javascript function present on the page.

[devised]

The reason I have the function at the end of the page as well is because when I only called the function with an onload, the function would calculate the height of the div at the moment when the page was loading. The page I was working on has a dynamic product menu on the left with a large amount dynamic products and it also had a large amount of dynamic content in the content div as well. I was having problems with the div not stretching all the way down and it wasn't consistent each time, so I figured it must of been bacause the mass amount of content was being loaded as it was calculating the height of the div. After putting the script at the end of the page as well, it worked fine. Now I could be wrong and many people will criticize the technique (which I do as well), but it solved the problem I had.

All of this is why I'd rather find a better way of handling it. Until then...

[Paul_C]

<table><tr><td></td><td></td><td></td></tr></table> is a better way of handling it than javascript

[Icheb]

Originally Posted by Paul_C

<table><tr><td></td><td></td><td></td></tr></table> is a better way of handling it than javascript

Maybe, but the benefits of a tableless layout outweigh the downsides for me. The people who don't have Javascript (enabled) won't see the outer columns stretched to the bottom, but everyone will have faster loading pages due to the nature of divs and due to the source code being smaller.

devised: It works fine for me, so I can stick it being called in the body-tag.