Was ist schiefgelaufen? (div-container)

Donkey

Hallo zusammen!

Jetzt möcht ich endlich mal wegen der suchmaschinenfreundlichkeit weitestgehend die Tabellen verbannen - zumindest die, die das ganze Layout trägt.

Da das 3 "Spalten" sind müssen 3 Container nebeneinander.
Meine Konstruktion funzt aber nur im IE, AOL Browser und T-Online Browser - alle anderen mit denen ich getestet hab stellen das falsch dar.
Warum?

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
Das ist ein Test...
<div>
<div class="main" style="width:20%">Container 1</div>
<div class="main" style="width:60%">Container 2<br><br><br><br><br><br><br></div>
<div class="main" style="width:19%">Container 3</div>
</div>
</body>
</html>

Alles anzeigen

Code

.main
{
display:inline;
vertical-align:top;
border:solid 1px #FF0000;
}

Gruß Donkey

Dodo

und was ist falsch?
link?

Donkey

Mom...
Hab das noch auf xampp laufen

Dodo

dann screenshots?

Donkey

http://kendo-bunker.de/donkey/test/

Also in den meisten Browsern istdas eben irgendwie "zerschnitten"

Screenshots:

IE: [Blockierte Grafik: http://i36.tinypic.com/m7z31w.png]
FF: [Blockierte Grafik: http://i33.tinypic.com/2mepsh4.png]

Dodo

mach mal statt deinem CSS das hier:

Code

.main
{
float:left;
border:solid 1px #FF0000;
}

und das hier als HTML

HTML

<div class="main" style="width:20%">Container 1</div>
<div class="main" style="width:60%">Container 2<br><br><br><br><br><br><br></div>
<div class="main" style="width:19%">Container 3</div>
<br style="clear:both;" />

Donkey

wow - das funzt

was bewirkt das? <br style="clear:both;" />

Dodo

wer floatet muss auch clearen

float besagt dass die elemente rechts davon weitergeführt werden und nicht wie bei divs standartmäsig unten
clear beendet diesen effekt

sejuma

Es ist nicht besonders sinnvoll und nicht im Sinne von CSS, dass du eine Klasse verwendest und die dann nochmal (bzw. dreimal) individuell per style-Angabe formatierst.
Da würde ich eher drei individuelle Div-ID's nehmen, von denen jeder eine ensprechende Gesamtdefinition hat.
Sieh dir einmal dieses Beispiel an: http://www.ohne-css.gehts-gar.net/0027.php

Tags