Hallo!
Kurze Beschreibung meines Problems:
Ich habe ein auf Floats basierendes Seitenlayout . Dreispaltig mit darüberliegendem Header. Das Ganze ist komplett zentriert.
Allerdings - bedingt durch die Float-Angaben in #right #left und #content, wird width:100%; aus #page nicht beachtet.
Das sieht milde gesagt, scheisse aus.
Hier mal der Code, in der Hoffnung das Ihr eine Lösung für mich habt. Danke!
<html>
<head>
<title>titel</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>
<body>
<div id="page">
<div id="head"></div>
<div class="navi" id="left">
<br />
<br />
<br />
<br />
</div>
<div id="content_area">
<h1>Lorem ipsum dolor sit amet</h1>
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="navi" id="right">
<br />
<br />
<br />
<br />
</div>
<div class="footer"></div>
<div class="clear"></div>
</div>
</body>
</html>
#page {
width:800px;
height:100% !important;
margin:auto;
border:solid 1px black;
}
#head {
background-image:url("bild.jpg");
height:205px;
}
#left {
float:left;
border:solid 1px black;
}
#right {
float:right;
border:solid 1px black;
}
#content_area {
width:598px;
float:left;
border:solid 1px black;
}
.navi {
width:130px;
overflow:hidden;
}
.clear {
clear:both;
}