Hallo,
nun brauch ich als nicht html'er eure hilfe
Das folgende Layout hab ich hinbekommen. Nun hab ich das Problem, dass die SUBNAV im linken bereich immer unten hängen soll. die höhe der content-spalte ist aber dynamisch. von meinem verständnis her müsste das funktionieren, wenn ich der linken spalte eine höhe von 100% gebe und der subnav bottom:0px. geht aber nicht. hat das schonmall jemand gemacht?
Code:
<!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" xml:lang="en" lang="en" >
<head>
<title>Template</title>
<style>
html, body{
margin:0;
padding:0;
padding-top:41px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#pagewidth{
width:829px;
text-align:left;
margin-left:auto;
margin-right:auto;
}
#header{
position:relative;
height:40px;
background-color:#fff;
width:100%;
margin-bottom:40px;
}
#logo{
background-color:#eee;
width:204px;
height:40px;
background-image:url(/logo.jpg);
margin-right:52px;
float:left;
}
#topnavi{
background-color:#aaa;
height:14px;
padding-top:26px;
}
#leftcol{
background-color:#abc;
padding-right:52px;
width:204px;
height:100%;
float:left;
position:relative;
}
#lefttop{
background-color:#cba;
position:absolute;
bottom:0px;
}
#leftbottom{
position:absolute;
top:0px;
background-color:#bca;
}
#maincol{
background-color:#abc;
padding-right:74px;
float:right;
display:inline;
position:relative;
width:499px;
}
#footer{
background-color:#ddd;
margin-top:21px;
height:22px;
width:829px;
background-image:url(/footer.gif);
color:#fff;
clear:both;
font-size:9pt;
}
#aktiv{
margin-top:4px;
padding-left:22px;
text-transform:uppercase;
width:234px;
height:22px;
float:left;
}
#klickpfad{
color:#000;
margin-top:4px;
width:499px;
height:22px;
float:left;
}
#sprache{
margin-top:4px;
padding-left:5px;
text-transform:uppercase;
width:69px;
height:22px;
float:left;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
</style>
</head>
<body>
<div id="pagewidth">
<div id="header">
<div id="logo"></div>
<div id="topnavi">NAVI</div>
</div>
<div id="wrapper" class="clearfix">
<div id="maincol">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
<div id="leftcol">
<div id="lefttop">TEASER</div>
<div id="leftbottom">SUBNAV</div>
</div>
</div>
<div id="footer">
<div id="aktiv">lorem</div>
<div id="klickpfad">footer</div>
<div id="sprache">ipsum</div>
</div>
</div>
</body>
</html>
bin für jede hilfe dankbar...
gruss,
keaton