is it possible to get 100% height using css?

[force10x]

I have a three column Layout here (http://force10x.freehostia.com/css_mess/index.htm)

the css can be seen here (http://force10x.freehostia.com/css_mess/master_01v2.css)

as you can see, the left column wont expand vertically like the right column does.

any tips on how this can be corrected?

thanks for taking the time to go through this.

cheers!


P.S. The HTML validator, gives about 25 errors (http://validator.w3.org/check?uri=http%3A%2F%2Fforce10x.freehostia.com%2Fcss_mess%2Findex.htm&charset=%28detect+automatically%29&doctype=Inline&group=0) that I cant correct.:(
my guess is that those are JavaScript errors and nothing to do with HTML/CSS.

[tech_support]

To get rid of the validation errors, you'll need to add <![CDATA and ]]> before your JS and CSS code starts (in a comment), like this:


<script type="text/javascript">
//<![CDATA[

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"]; //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener){
window.addEventListener("load", buildsubmenus, false)
}else if (window.attachEvent){
window.attachEvent("onload", buildsubmenus)
}
//]]>
</script>

...and for your CSS:

<style type="text/css">
/*<![CDATA[*/

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckerdiv {

font: normal bold 100% verdana;
}

.suckerdiv ul{
margin:0;
padding:0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

.suckerdiv ul li{
position:absolute;
left-padding:20px;
position: relative;
background: #f0f0f0;

}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: visible;
margin-left:0px;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: #00539f;
text-decoration: none;
background: #f0f0f0;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;

}

.suckerdiv ul li a:visited{
color: red;

}

.suckerdiv ul li a:hover{
background-color: #f0f0f0;
}

.suckerdiv .subfolderstyle{
background: url(images/arrow-list.gif) no-repeat center right;
}


/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

/*]]>*/
</style>
and your other bit of CSS:


<style type="text/css">
/*<![CDATA[*/
div.c1 {text-align:center}
/*]]>*/
</style>

[boogyman]

as you can see, the left column wont expand vertically like the right column does.

is it possible to get 100% height using css?

unless your javascript or css is explicitly limiting the height, which it doesn't appear to be doing, the default "height" is the amount of space the content within the element contains... so if you are asking to expand the left column beyond the height of the content you need to either implement another javascript that will trick the browser into thinking the elements are all of the same height, or you will need to apply a background image that repeats on the y (vertical) axis.

[Medyman]

The simplest way to get equal height 3 column layouts is this:




<html>
<head>
<style type="text/css">

/* This bit does all the work */
#container {position:relative; display:block; background:#0ac; border-left:200px solid #eee; border-right:200px solid #eee; overflow:visible;}
#left {float:left; position:relative; width:198px; margin-left:-197px; display:inline;}
#right {float:right; position:relative; width:198px; margin-right:-197px; display:inline;}



</style>
<!--[if IE]>
<style type="text/css">
#container {display:inline-block;}
#left {width:197px;}
</style>
<![endif]-->
</head>

<body>

<div id="container">
<div id="right">RIGHT</div>

<div id="left">LEFT</div>

CENTER

<div class="clear"></div>
</div>

</body>
</html>


It has a small hack for IE, but this is the absolute simplest way I've been able to achieve equal height three column layouts.

Note: These are faux columns. They only give the apperance of equal height.

[force10x]

Hi all,
thank you for taking the time to reply. :-)

-->techSupport
Yep, that CDATA bit is valuable info. can share that bit at my next class in uni ;-)

-->boogyman/Medyman
thank you. will play around a bit with both options and try to work it out.

thanks again