innerhalb einer Box floten und der Box 100% Höhe zuweisen
chris
- css
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;
}
Das Ganze ist komplett zentriert.
ja, durch ein unsinniges element, wo du doch body auch verwenden könntest ...
Allerdings - bedingt durch die Float-Angaben in #right #left und #content, wird width:100%; aus #page nicht beachtet.
welches width:100%; ?!
#page {
width:800px;
height:100% !important;
margin:auto;
border:solid 1px black;
}
im übrigen solltest du weniger überflüssige leerzeilen verwenden ;)
Das Ganze ist komplett zentriert.
ja, durch ein unsinniges element, wo du doch body auch verwenden könntest ...Allerdings - bedingt durch die Float-Angaben in #right #left und #content, wird width:100%; aus #page nicht beachtet.
welches width:100%; ?!
#page {
width:800px;
height:100% !important;
margin:auto;
border:solid 1px black;
}im übrigen solltest du weniger überflüssige leerzeilen verwenden ;)
Tut mir leid, in der Erklärung habe ich das !important; vergessen.
Aber auch wenn ich den #page-Block weg lasse und als umschliessendes Element body nehme, ersteckt sich die Seite ohne dass ein entsprechend großen Inhalt nicht über die vollen vertikalen 100% (height:100% important;) :/
Danke für den Hinweis bezgl. unsinniges #page :)
Element body nehme, ersteckt sich die Seite ohne dass ein entsprechend großen Inhalt nicht über die vollen vertikalen 100% (height:100% important;) :/
eh klar, body und html haben da auch noch ein wörtchen mitzureden :)
Element body nehme, ersteckt sich die Seite ohne dass ein entsprechend großen Inhalt nicht über die vollen vertikalen 100% (height:100% important;) :/
eh klar, body und html haben da auch noch ein wörtchen mitzureden :)
und was sollte ich Deiner Meinung nach machen, um die Ausdehnung auf 100% zu erreichen?
auch wenn height:100%; body zugewiesen wird, klappts nicht :@
auch wenn height:100%; body zugewiesen wird, klappts nicht :@
drum sagte ich ja, dass body UND html etwas dagegen haben