Forums / Setup & design / div height 100% problem

div height 100% problem

« 
Previous topic
|
Setup & design
|
Next topic
 »
Author Message

Valentina Ferrari

Friday 02 July 2004 2:49:42 am

Hi!
I'm building a new site using a totally table-less design (only with DIV), using CSS.
My site has header, footer, right column, left column and content column.
I would like to view all my columns at the same height; so if the content column is longer than left and right columns I want that all the columns has the same height.

Buy DOESN'T WORKS!

In my stylesheet the body and the container div has height 100% (the container div contains all the elements of my site: footer, header, right, left and content columns).
Also right, left and content columns has height 100%.

I'm optimizing my site for IE 5.5, IE 6.0, NS 6.2, NS 7.1, Opera and Mozilla (last version).

I don't know want I have to do!!
Anyone has the same problem? Anyone has the solution?

Thanks a lot!
Valentina

Paul Forsyth

Friday 02 July 2004 3:14:35 am

Try adding this to your css:

/* Fix for body height problem, from: http://www.sitepoint.com/forums/showthread.php?t=166525 */
.clear
{
  clear:both;
/*** these next attributes are designed to keep the div
height to 0 pixels high, critical for Safari and Netscape 7 ***/
  height:1px;
  overflow:hidden;
  margin-bottom:-1px;
}

/*** stops IE browsers from displaying
the clear div/br in the page, as these are for Moz/Opera and
Safari only. If IE 5.x Win DID display these, the page is too high ***/
* html .clear
{
	display:none	
}

and then in your html at the end before the final </div> (though it may just be necessary in the center div).

  <div class="clear">&nbsp;</div>

Its a hack but seems to work.

paul

--
http://www.visionwt.com

Valentina Ferrari

Friday 02 July 2004 5:10:08 am

Hi Paul,
thank you for your suggest but I have the same problem.
Maybe I didn't explain so well my site situation.

So if you want help me you can see the image that explain the problem at this URL:
www.bossoniecipriani.it/mysite.gif

Thank you very much!
Valentina

Paul Forsyth

Friday 02 July 2004 6:10:16 am

Im away for the weekend now so i cant help any further, sorry.

But, play around with that code and follow the link given. It does do what you want.

paul

Alex Jones

Friday 02 July 2004 7:21:14 am

Valentina, the easiest solution would be to assign a background image (which shows all three columns) to your container div. This way, no matter what, all three are shown. An example of this method is detailed here: http://www.alistapart.com/articles/fauxcolumns/ Note, this will only work if you are using a fixed-width design.

Alex
bald_technologist on the IRC channel: #Exponential
http://www.agrussell.com :: http://www.cuttingedge.com

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Patrick Woods

Friday 02 July 2004 1:57:22 pm

I recently had to deal with this for work. Some javascript takes care of the problem. Feel free to re-use this function if you find it useful. I found it works pretty well. The only requirement is that you place your 3 columns inside another DIV so there is some useless markup but it pays off.

function equalHeights(element) {
		var content = document.getElementById(element);
		var desiredHeight = content.offsetHeight;
		var contentDivs = content.getElementsByTagName('div');
		for(i=0; i < contentDivs.length; i++) {
		if (contentDivs[i].parentNode.id == element) {
			contentDivs[i].style.height = desiredHeight + 'px';
			}
		}
}

Then just call the function on page load using your favorite method (I like using addEvent), passing the DIV that contains all 3 columns

 
equalHeights('column_container_div');

This won't work on anything that doens't support the W3C DOM but it will still degrade very well. Hope it helps you out.

--Patrick
http://www.hakjoon.com/

--
www.hakjoon.com

Lazaro Ferreira

Friday 27 August 2004 10:53:38 am

Hi Patrick,

I have tested this JavaScript Code, it works fine for IE, but it doesn't work for
NN 7.1, nor for Mozilla

Have you tested this for Mozilla or Netscape Navigator ?

Thanks
Lazaro

Lazaro
http://www.mzbusiness.com

Patrick Woods

Friday 27 August 2004 4:29:42 pm

I created the code in Mozilla, so in my experience it works. Are you using floats by any chance? In Mozilla a container won't expand to the height of floated children unless the container itself is floated. Could that be the reason?

I have a new version that takes margins and padding into account but I need to tweak it a little bit more. I'll release it to the forum once I have it all tweaked.

I'd be happy to take a look at stuff and see if I can figure out why it's not working for you.

--Patrick

--
www.hakjoon.com