divs float und zentrieren
frankx
- css
Hallo,
wenn ich sagen wir drei divs/Absätze nebeneinander und zentriert haben möchte, könnte ich ein umgebendes div basteln, darin die drei nebeneinander per float:left und dann das umgebende zentrieren? Für "normale" Browser dem umgebenden div eine fest Breite und dan mittels margin:0px auto zentrieren? Für den IE ein workarround mit * html noch ein umgebendes extra-div und dem dann text-align:center verpassen. Oder geht das auch anders, einfacher, eleganter?
<style type="text/css">
* {padding:0px; margin:0px}
.umgebendesdiv {
margin:0px auto;
width:840px;
border:1px solid green;
}
p {
float:left;
height:200px;
width:200px;
border:40px solid brown;
text-align:center;
}
* html .explorerdiv {
text-align:center;
}
* html .umgebendesdiv {
width: 602px;
}
</style>
</head>
<body>
<div class="explorerdiv">
<div class="umgebendesdiv">
<p>Absatz1</p>
<p>Absatz2</p>
<p>Absatz3</p>
</div>
</div>
Dank Frankx
Ps. Warum zieht der FF den Rahmen bzw. das umgegende div um die float:left Absätze nur, wenn das umgebende div auch eine Höhe verpasst bekommt?
Hallo Frankx
... Für den IE ein workarround mit * html noch ein umgebendes extra-div und dem dann text-align:center verpassen. Oder geht das auch anders, einfacher, eleganter?
Wozu soll das extra-div sein?
Du kannst auch body text-align:center verpassen.
Ps. Warum zieht der FF den Rahmen bzw. das umgegende div um die float:left Absätze nur, wenn das umgebende div auch eine Höhe verpasst bekommt?
Weil gefloatete Elemente aus dem Elementfluss entfernt werden. Sie
beeinflussen die Höhe des umgebenene Elements nicht, wenn dieses nicht
ebenfalls gefloatet ist.
Du müsstest den Elementfluss wieder herstellen.
(clear, Clear Floats Without Structural Markup)
Auf Wiederlesen
Detlef