nicht angemeldet
Website zentrieren und Websiterahmen 100% hoch
Gunnar BittersmannHallo,
ich habe einen kleinen Konflikt zwischen zwei Eigenschaften, die meine neue Website haben soll.
Die Website soll einerseits zentriert im Browser angezeigt werden und andererseits soll der Rahmen-Div, welcher sich (eigentlich) um der gesamten Website befinden soll, sich in der Höhe den inneren Divs anpassen.
Das Ganze habe ich versucht wie folgt zu realisieren:
HTML:
<div id="rahmen">
<div id="innerer div"></div>
</div>
CSS:
#rahmen {
width: 990px;
margin-left: auto;
margin-right: auto;
}
#innerer div {
float: left;
}
Damit habe ich meine Website zumindest schonmal zentriert.
Das Problem dabei ist allerdings, dass der div "rahmen" nicht so hoch ist, wie sein eigener inhalt. Ich habe gelesen, dass ich das verhindern kann, indem ich dem div "rahmen" auch die css eigenschaft float: left; gebe. Wenn ich das tue, ist der div "rahmen" zwar 100% hoch, allerdings ist die Website nichtmehr zentriert im Browser.
Kann mir jemand weiterhelfen?
Grüße,
Dennis
-
@@Dennis N:
nuqneH
Das Ganze habe ich versucht wie folgt zu realisieren:
<div id="rahmen">
<div id="innerer div"></div>
</div>„Dass viele "Designer" der Meinung sind, <html> und <body> sollten möglichst neutralisiert und das Layout dann mittels <div>-Elementen umgesetzt werden, ist bedauerlich bis ärgerlich.“ [at] S.a. Zentrieren ohne zusätzliches Markup [Postner] im Webkrauts-Adventskalender 2010.
Das Problem dabei ist allerdings, dass der div "rahmen" nicht so hoch ist, wie sein eigener inhalt.
Richtig, denn bei der Berecnung der Höhe gilt: „Nur untergeordnete Elemente im normalen Fluss werden berücksichtigt (das heißt, Floating-Boxen und absolut positionierte Boxen werden ignoriert, und relativ positionierte Boxen werden ohne ihren Offset betrachtet.)“ [CSS2 §10.6.3]
Ich habe gelesen, dass ich das verhindern kann, indem ich dem div "rahmen" auch die css eigenschaft float: left; gebe.
Ja. Dass du ihm auch die Eigenschaft 'overflow: hidden' geben kannst, hast du nicht gelesen? S.a. Einschließen von float-Boxen in Grundlagen für Spaltenlayout mit CSS [molily]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Super, danke dir für deine Hilfe!
-