CSS float

04/02/2008 - 23:13 von Lutz Elßner | Report spam
Ich verwende Internet Explorer 7. Unten steht eine komplette html Seite.
Die roten Kàstchen div.w sind float: left definiert und springen bei
geringerer Breite auf die nàchste Zeile. Das ist auch der Zweck..

Ist beim àußeren blauen div.v width: 100% auskommentiert, dann ist es
trotzdem 100% breit. Die Höhe und die top Position (in der 2. roten Reihe)
sind aber völlig unlogisch. Warum?

Mit width: 100% (Kommentar entfernen), ist die Breite 100% (logisch) und die
Höhe passt sich dem Inhalt an (sehr gut, aber warum stimmt die Höhe jetzt).

Anstatt width kann aber auch height: 100% stehen, mit exakt der gleichen
Wirkung wie width. Unlogisch, Warum?

Das Ziel ist, dass sich das blaue Außen-Kàstchen nicht nur in der Höhe,
sondern auch in der Breite an die inneren roten Kàstchen anpasst, egal wie
viele nebeneinander oder untereinander stehen. Wie geht das?

Weil das blaue dann weniger als 100% breit ist, soll alles noch zentriert
werden.

Versteht das total kompatible CSS Verhalten jemand?

Lutz


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xht...">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>float: left</title>
<style type="text/css">
div.v
{ /* width: 100%;*/
border-style: double;
border-width: 2px;
border-color: Blue;
}
div.w
{ float: left;
width: 350px;
height: 100px;
border-style:double;
border-width: 2px;
border-color: Red;
}
</style>
</head>
<body>
<div class="v">
<div class="w">1</div>
<div class="w">2</div>
<div class="w">3</div>
<div class="w">4</div>
<p>5</p>
</div>
<p>ABC</p>
</body>
</html>
 

Lesen sie die antworten

#1 Christoph Schneegans
05/02/2008 - 10:43 | Warnen spam
Lutz Elßner schrieb:

Ich verwende Internet Explorer 7. Unten steht eine komplette html Seite.



Bei CSS-Layouts ist es hilfreich, eine Dokumenttyp-Deklaration
zu verwenden, die den Browser in den "standards-compliant mode"
versetzt, also bspw.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xht...">

<http://schneegans.de/sv/> · Schema-Validator für XML

Ähnliche fragen