Hi
Zitat:
Dennoch orientiert sich der graue container nicht an den weissen container sondern danach wieviel inhalt (asd's) er hat.
|
Ist ja auch richtig so! DENN eine Höhenangabe in % orientiert sich am Elternelement
welches, sofern Höhe angegeben wiederum an das Elternelement usw.
Also in deinem Fall
rechts > contentwrapper >
bodywrapper >
body
Hat eins davon KEINE Höhenangabe klappts nicht in allen Browsern.
Rot = Bei dir keine Angabe!
sieh dir das mal an
Code:
html,body{
background-color: #222;
text-align: center;
height:100%;
}
#bodywrapper{
background-color: #000;
width: 700px;
color: #404040;
font-size: 14px;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 2px;
border: 5px solid #FFFFFF;
height:100%;
}
#banner{
height:307px;
}
#navi{
background-color: #000;
color: #FFFFFF;
}
#contentwrapper{
position: relative;
height: 100%;
}
#links{
background-color: #FFF;
width: 500px;
height: 100%;
}
#rechts{
position:relative;
text-align: center;
width: 200px;
height: 100%;
background-color: #101010;
float:right;
}
#footer{
width: 700px;
background-color: #000000;
color: #FFF;
float:right;
}
Zitat:
Ich möchte nur, dass der graue Container immer die selbe height hat wie der weisse Container
|
Entweder per JS oder den "links" in den "rechts" packen ;)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link href="template-Dateien/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bodywrapper">
<div id="banner"></div>
<div id="navi">News | Termine | Kontakt</div>
<div id="contentwrapper">
<div id="rechts">
<div id="links">
NEWS BLAALBALABLABAL<br>NEWS BLAALBALABLABAL<br>
NEWS BLAALBALABLABAL<br>NEWS BLAALBALABLABAL<br>
NEWS BLAALBALABLABAL<br>NEWS BLAALBALABLABAL<br>
NEWS BLAALBALABLABAL<br>NEWS BLAALBALABLABAL<br>
NEWS BLAALBALABLABAL<br>NEWS BLAALBALABLABAL<br>
NEWS BLAALBALABLABAL<br>NEWS BLAALBALABLABAL<br>
NEWS BLAALBALABLABAL<br>NEWS BLAALBALABLABAL<br>
</div>
asd
<br style="clear:left;" />
</div>
</div>
<div id="footer">AGB Impressum Datenschutz</div>
</div>
</body></html>
Code:
html,body{
background-color: #222;
text-align: center;
}
#bodywrapper{
background-color: #000;
width: 700px;
color: #404040;
font-size: 14px;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 2px;
border: 5px solid #FFFFFF;
}
#banner{
height:307px;
}
#navi{
background-color: #000;
color: #FFFFFF;
}
#contentwrapper{
position: relative;
height: 100%;
}
#links{
background-color: #FFF;
width: 500px;
float:left;
}
#rechts{
position:relative;
text-align: center;
background-color: #101010;
}
#footer{
width: 700px;
background-color: #000000;
color: #FFF;
float:right;
}
mfg
CKaos