Kolonne 100% højde i layout - hjælp
Hej, jeg har følgende layout, men jeg aner ikke hvordan man får #left til at dække 100% inden for containeren, bortset fra header og footer naturligvis. Jeg kan godt få det til at fungere i IE, men ikke i FF.Kan nogen mon hjælpe?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* commented backslash hack v2 \*/
html, body{height:100%;}
/* end hack */
body {padding:0;margin:0;background:#fff url(bigfade.jpg) repeat left top;color: #000;text-align:center;}
#container{height:100%;min-height:100%;width:612px;background:transparent url(images/1colcentrebg.gif) repeat-y center top;color: #000000;margin:auto;text-align:left;position:relative; border-left:1px solid; border-right:1px solid;}
html>body #container{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#header {border:1px solid;height:40px;margin:0px;}
#footer {position:absolute;bottom:0;left:0;height:40px;border:1px solid;width:100%;}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
#left {position:relative;/*ie needs this to show float */width:100px;float:left;padding-top:40px;/*needed to make room for header*/border:1px solid; }
#main {width:508px;float:right;padding-top:40px;/*make room for header*/border:1px solid;}
</style>
</head>
<body>
<div id="container">
<!-- header -->
<div id="header">Header</div>
<!-- left -->
<div id="left">
Left
</div>
<!-- right -->
<div id="main">
Lorem ipsum.
</div>
<!-- footer -->
<div id="clearfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
På forhånd tak
