3 DIV-Container nebeneinander ausrichten und dann neue Zeile

[exzel]

Hallo zusammen,

ich wollte drei Div-Container nebeneinander ausrichten, dann eine neue Zeile beginnen und dort dann wiederum drei Container nebeneinander haben.

Ich bekomme das zwar hin, aber es wirkt halt sehr gebastelt. Kann Div hier effektiver verwendet werden?

<div style="float:left">
<h3>
...
...
</div>

<div style="float:left; padding-left:10px; width:50px">
<h3>
...
...
</div>

<div style="float:left; padding-left:10px; width:50px">
<h3>
...
...
</div>

<div style="clear:left" />

<div style="float:left">
<h3>
...
...
</div>

<div style="float:left; padding-left:10px; width:50px">
<h3>
...
...
</div>

<div style="float:left; padding-left:10px; width:50px">
<h3>
...
...
</div>

Gruß und Dank!

[ChrisB]

Hi,

Ich bekomme das zwar hin, aber es wirkt halt sehr gebastelt. Kann Div hier effektiver verwendet werden?

Ggf. gibt es passendere Elemente als DIVs - insb., wenn du HTML5 verwendest.

<div style="clear:left" />

<div style="float:left">

Das erste extra-DIV ist überflüssig, clearen kann auch das zweite selber.

MfG ChrisB

[exzel]

Hallo und danke für die Antwort,

aus

<div style="clear:left" />

<div style="float:left">

wird dann <div style="clear:left">Inhalt</div>, richtig?

Aber wenn ich das so mache dann verschiebt sich der nächste gefloatete Div-Container in die nächste Zeile, obwohl dieser ja in der gleichen Zeile bleiben soll wie der geclearte.

<div style="clear:left">Inhalt</div>
<div style="float:left; padding-left:10px; width:50px"> <!-- Dieser Container landet in der nächsten Zeile --> </div>

Gruß

[Matthias Apsel]

Om nah hoo pez nyeetz, exzel!

beachte vor allem den ersten Teil aus Chris' Posting. Es ist unsinnig, ein Tabellenlayout mit div-Elementen nachbauen zu wollen.

Zeig uns die problematische Seite, um diesen Vorwurf zu entkräften.

Matthias

[exzel]

Ich bin blutiger Anfänger in bezug auf HTML/CSS und wollte mich einfach mal mit den DIV-Containern beschäftigen.

Deshalb habe ich es mir extra kompliziert gemacht, um auch wirklich das gesamte Thema DIV zu verstehen.

Die Antwort von Gunnar: "Der geclearte Container ist ja auch nicht gefloatet. So wäre er es: <div style="clear:left;float:left">" hat aber mein Anliegen soweit beantwortet.

Nur eines verstehe ich nicht, wie kann ein geclearter Container gleichzeitig gefloatet sein?

Vielen Dank!

[Matthias Apsel]

Om nah hoo pez nyeetz, exzel!

Ich bin blutiger Anfänger in bezug auf HTML/CSS und wollte mich einfach mal mit den DIV-Containern beschäftigen.

Deshalb habe ich es mir extra kompliziert gemacht, um auch wirklich das gesamte Thema DIV zu verstehen.

Es lohnt nicht, sich gesondert mit div-Elementen zu beschäftigen. Sie sind Elemente wie andere auch, nur ohne semantische Bedeutung. Alles was du mit ihnen üben möchtest, kannst du auch mit p-Elementen, h1-Elementen, ... üben.

Ich schlage vor, du schaust dich mal in unserem Wiki um.

Matthias

[exzel]

Hallo nochmal,

hab' den Text "Float: Die Theorie" mal angelesen. Dort steht: "Floats sind aus dem Fluss der HTML-Elemente herausgenommen."

Also so wie ich das verstehe, bewirkt der Float bei dem Element, dass es aus dem Textfluss herausgenommen wird. Das nachfolgende Element liegt also direkt unter dem gefloateten Element. Der Browser vergrößert das nachfolgende Element derart, dass es voll und ganz lesbar ist. Deshalb scheint es als umfließen darauf folgende Blockelemente die Floats, obwohl es eigentlich unterhalb des gefloateten Elements liegt. Mit clear:left wird es aus dem Umfluss der vorhergehenden genommen. Das Element liegt dann nicht mehr unterhalb der float, sondern wird vertikal unter den Floats angeordnet. Es kann aber noch immer aus dem regulären HTML-Fluss herausgenommen werden, indem man wieder float:left angibt.

Hier auch noch ein interessanter Text aus Webmaster Pro:"Die Eigenschaft clear beendet das Umfließen vorherstehender Elemente. Dabei beeinflusst sie keine float Definitionen innerhalb des Elements. In der Praxis führt der Einsatz von clear dazu, dass das Element vertikal unterhalb des gefloateten Bereichs angeordnet wird. Diese Eigenschaft kann mit float kombiniert werden, wenn nachfolgende Elemente wiederum nebeneinander positioniert werden sollen."

Vielen Dank für die Hilfe!

[Gunnar Bittersmann]

@@exzel:

nuqneH

Ich bin blutiger Anfänger in bezug auf HTML/CSS

Dann solltest du dir gar nicht erst angewöhnen, Styleangaben inline in @style-Attribute zu pferchen.

Nur eines verstehe ich nicht, wie kann ein geclearter Container gleichzeitig gefloatet sein?

'clear' gibt an*, dass das Element selbst nicht um andere floatet. 'float' gibt an*, dass andere Elemente um das Element selbst floaten. Das eine schließt das andere nicht aus.

Qapla'

* mit anderem (gültigen) Wert als "none", versteht sich

[Der Martin]

Hallo,

Nur eines verstehe ich nicht, wie kann ein geclearter Container gleichzeitig gefloatet sein?

das "clear" heißt, dass ein bis hierher geltendes floating aufgehoben wird und alles wieder "sauber" miteinander läuft.
Ein zusätzliches "float" heißt, dass nachfolgende Inhalte ab hier wieder am Container vorbeifließen sollen.

Das ist kein Widerspruch.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Das ist kein Widerspruch.

Erster! ;-b

Qapla'

[Der Martin]

Hallo Gunnar,

Das ist kein Widerspruch.
Erster! ;-b

jaja, is' ja gut.
Aber als ich anfing, meinen Text zu schreiben, war dein Posting noch nicht da. ;-)

Ciao,
 Martin

[Gunnar Bittersmann]

@@exzel:

nuqneH

aus

<div style="clear:left" />
<div style="float:left">
wird dann <div style="clear:left">Inhalt</div>, richtig?

Nein, wo ist denn das 'float' geblieben?

Aber wenn ich das so mache dann verschiebt sich der nächste gefloatete Div-Container in die nächste Zeile,

Ja, natürlich. 'float' sagt, dass _nachfolgende_ Inhalte das betreffende Element umfließen sollen.

obwohl dieser ja in der gleichen Zeile bleiben soll wie der geclearte.

Der geclearte Container ist ja auch nicht gefloatet. So wäre er es: <div style="clear:left;float:left">

Du solltest aber keine Darstellungsangaben inline im Markup machen, also keine @style-Attribute verwenden. Alle Darstellungsangaben gehören ins Stylesheet. Alle.

Vielleicht möchtest du auch gar kein 'float' verwenden, sondern 'inline-block'.

Qapla'