/* 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).
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 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.
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
You must be logged in to post messages in this topic!