Hallo zusammen ...
Ich bin aktuell dabei mir HTML/CSS etc beizubringen.
Nun habe ich ein normales <div>-Boxmodell aufgestellt ... allerdings bin ich anhand der Abbildung ein wenig ... sagen wir ... irritiert. Ich bastel und überlege nun schon ewig, aber es klappt einfach nicht.
Hier zu meinem Problem. Ich habe ein simples <div> in den Body gepackt, ihm die Größe 1024*800 zugewiesen und es horizontal zentriert, Margin zum body ist hierbei 20px.
Nun habe ich in das <div> 4 weitere <div>s gepackt. Von der Breitenangabe ergibt sich summiert immer 1024. Dieses wird im IE 10 auch richtig dargestellt. Das "Eltern-div" ist komplett gefüllt.
In Chrome allerdings ist das nicht der Fall. Das "inhalt-<div>" füllt das "Eltern-<div>" nicht in der kompletten Breite aus. Das "header- und footer-<div>" allerdings schon, und da ist die breite fest definiert...
Das letzte Problem, was ich nicht verstehe, ist ... addiert man nun die "height-Werte", dann kommt man insgesamt auf 780px. Das "Eltern-<div>" ist allerdings trotzdem komplett ausgefüllt, obwohl gegenüber der Definition ja 20px fehlen (die beiden border-bottom habe ich hier schon eingerechnet). Allerdings stellt sowohl Chrome als auch IE es so dar, als wären es 800px.
Hier der Quelltext:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div > #header {
background-color: yellow;
width: 1024px;
height: 40px;
text-align: center;
padding: 2% 0 0 0;
border-bottom: 5px solid white;
}
div > #nav {
background-color: yellow;
width: 150px;
height: 710px;
border-bottom: 5px solid white;
border-right: 5px solid white;
float: left;
}
div > #inhalt {
background-color: yellow;
width: 869px;
height: 710px;
border-bottom: 5px solid white;
}
div > #footer {
background-color: yellow;
width: 1024px;
height: 20px;
}
</style>
</head>
<body>
<div style="margin: 20px auto; width: 1024px; height: 800px; background-color: black;">
<div id="header">Das hier ist der Header</div>
<div id="nav">Hier ist die Navi!</div>
<div id="inhalt">Inhalt</div>
<div id="footer">footer</div>
</div>
</body>
</html>Anscheinend stehe ich irgendwo auf dem Schlauch oder habe einen kompletten Denkfehler ... ich weiß es wirklich nicht.
Könnt ihr mir bitte auf die Sprünge helfen?
Vielen Dank im Voraus!
