Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 13.12.2006, 17:15
keaton keaton ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2006
Beiträge: 5
keaton befindet sich auf einem aufstrebenden Ast
Lächeln Dynamische Höhe im Content und DIV immer unten

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
Mit Zitat antworten
Sponsored Links