Probleme mit float: left

[schronk]

Hallo,

ich sitzte jetzt bestimmt schon Stunden vor dem Quark und weiss nicht mehr weiter. Das hier ist mein Markup:

<div style="width: 400px; background: red;">
<div>Text</div>
<div>Text</div>
</div>

Jetzt möchte ich aber die beiden inneren DIVs nebeneinander haben. Also schreibe ich das hier:

<div style="width: 400px; background: red;">
<div style="float: left">Text</div>
<div style="float: left">Text</div>
</div>

Dummerweise spannt sich dann das umschließende DIV nicht mehr um die inneren DIVs bzw. deren Hintergund ist nun nicht mehr rot.
was mache ich nur falsch? Hilfe!

 

[BcF]

Wer float sagt muss auch clear sagen:
http://css4you.de/clear

Und funktioniert das tatsächlich, wenn du für die inneren Divs keine Breite angibst?

 

[prm]

Wie erwähnt: Du musst clearen, z.B. so:

<div style="width: 400px; background: red;">
<div style="float: left">Text<p>Test</p></div>
<div style="float: left">Text</div>
<div style="clear: both;"></div>
</div>

 

[schronk]

danke für die antworten. ich werde das heute abend mal antesten :-)

 

[neuroleptika]

Und funktioniert das tatsächlich, wenn du für die inneren Divs keine Breite angibst?

Ja, allerdings nehmen die gefloateten Boxen dann nur die Breite ihrer Inhalte ein (ähnlich wie Inlineelemente). Ansonsten verhalten sie sich weiterhin, ähnlich wie Blockelemente.

Was für krause Sätze...

 

[schronk]

funktioniert prima. danke!

ist aber irgendwie von der semantik des markups leicht murksig. aber html ist halt html. ;-)

 

[prm]

Was soll daran denn murksig sein?
Natürlich kannst du sämtliche Style-Angaben in eine ausgelagerte CSS-Datei oder in den Headberecih packen. Dadurch wird der HTML-Code wesentlich kürzer und übersichtlicher.

 

[schronk]

das div brauche ich doch nur, um eine bestimmte darstellung zu erzielen. es hat inhaltlich für die seite keinerlei bedeutung.
das finde ich leicht murksig. mit der semantik hat es dann doch nicht so viel zu tun. war schon spät gestern ;-)

 

[Efchen]

Naja, Dein restlicher Code, den Du oben geschrieben hast, ist genauso murksig.
Ein leeres Element, das weiter keinerlei semantische Bedeutung hat, ist doch okay. Besser als Text in ein aussageloses Tag zu packen.

SCNR,
-Efchen