|
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"> </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: #eZpublish
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
|
