View Full Version : Balancing Div Tags

09-29-2011, 10:54 AM
Hi, hope someone can see an answer here. I have 4 div tags which are hidden to begin with from the css as shown below:

#story1 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:top;}
#story2 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:top;}
#story3 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:bottom;}
#story4 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:bottom;}

The contents of these is pulled out of a db and so the quantity of text changes (within certain parameters) and so the size of the divs changes, hence no height: setting.

I know I could get around this by setting an absolute height and using overflow to show a scrollbar but I would rather not have a scrollbar as the amount of text will only be 100-200 words.

Elsewhere I have used the following script to equalise div tags

if (document.getElementById("member1").offsetHeight < document.getElementById("member2").offsetHeight){
document.getElementById("member1").style.height = document.getElementById("member2").offsetHeight + "px";
else {
document.getElementById("member2").style.height = document.getElementById("member1").offsetHeight + "px";

I tried this for my div tags but because they initially start with display:none it sets the height of them to zero. Is there a simple way to make all of these the same height whilst they are hidden?

09-29-2011, 11:28 AM
You may use a pure CSS solution:

09-29-2011, 03:59 PM
Hmmm, nice trick. I forgot to mention in the OP, only one div will be visible at any one time. I suspect it might end up being a set height with a scroll bar.