"<div></div>" Positionen setzen

[creator90]

Hi,
ich arbeite in meiner Freizeit auch an HTML und bei den DIVs habe ich Probleme.

Eigentlich wollte ich, dass die Divs, wenn man z.B. einen für die Navigation hat und einen für den normalen Inhalt der Seite, nebeneinander und nicht untereinander angeordnet werden.

#container {
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
    height: 800px;
}

#container #main_content {
    width: 524px;
    margin-right: auto;
    margin-left: auto;
}

#container #navigation {
    width: 250px;
}

Wie schaff ich das?

Danke für Antworten

[Falk Prüfer]

Hallo,

Stichwort: float.

Gruß Falk

[Christian Marquardt]

http://www.css4you.de/posproperty.html

[Efchen]

Das hat aber nichts mit "den divs" zu tun. Das gilt für alle Block-Elemente.
Man sollte bitte auch beachten, dass das "div" kein Wunder-Tag fürs Layouten ist. Wie alle anderen Tags auch dient es zur Auszeichnung der Struktur des Inhalts. Und es sollte auch primär dafür eingesetzt werden. "Layout mit div", was heutzutage der letzte Schrei sei, entlockt einem guten Web-Entwickler leider nur das - einen Schrei. Denn es ist genauso falsch, wie z.B. Layout mit Tabellen.

Das nur so am Rande.

Gruß,
-Efchen

[creator90]

Danke für eure Antworten, und ja, mit dem float klappt das.

Nun habe ich ein weiteres Problem und das hat auch mit den DIVs zu tun. Eigentlich ist das ja bei einem Code gemäß...

<div id="div_1">
   <div id="div_2">
    abcd
   </div>
</div>

(div_1 und div_2 werden über CSS konfiguriert)

...so, dass der #div_2 eine bestimmte Höhe haben kann und der #div_1 wird dann auch an diese Höhe angepasst, weil der #div_2 innerhalb von #div_1 liegt. Bei meinem Code ist dass allerdings nicht so, obwohl das eigentlich sein sollte (logisch gesehen). Hier sind plötzlich die zwei DIVs separat unterwegs, d.h. dass der #div_1 hinter #div_2 liegt und beide unterschiedliche Höhen haben.

Wieso?

[Falk Prüfer]

...so, dass der #div_2 eine bestimmte Höhe haben kann und der #div_1 wird dann auch an diese Höhe angepasst, weil der #div_2 innerhalb von #div_1 liegt. ...

Die Verwendung von float für den inneren Container löst diese starre Regel auf!

Gruß Falk

[creator90]

Die Verwendung von float für den inneren Container löst diese starre Regel auf!

heißt? Muss ich da im CSS Code was verändern, wenn ich "float" verwende?

[Efchen]

Wer "float" sagt, muss auch "clear" sagen :-)

[creator90]

hmm... ich hab das gemacht, aber da hat nix verändert...

#div_2 {
    float: right;
    width: 250px;
    clear: right;
    display: block;
}

Was falsch gemacht?

[Efchen]

Das selbe Element zu clearen macht ja auch keinen Sinn.
Das clear muss im nachfolgenden Element stehen, damit Du damit sagst "Jetzt stelle den normalen Textfluss wieder her". So wie Du das gemacht hast, sagst Du Deinem Browser, er soll den normalen Textfluss wieder herstellen, noch bevor er das Element überhaupt aus dem FLuss herausgenommen hat. Das funktioniert natürlich nicht.

[creator90]

also in div_1 ? oder direkt hinter div_2 noch im div_1?

[Efchen]

Da, wo Du den normalen Textfluss wiederherstellen willst. Also nach dem gefloateten Element und innerhalb des Elements, das das gefloatete Element umschließen soll.

div_1 und div_2 sind übrigens schreckliche Namen. Man weiß ja gar nicht, wozu die da sind. Bisschen mehr Semantik macht auch die Lösung von Problemstellungen einfacher.

In diesem Fall muss ein Element mit clear:right hinter das div_2 und in das div_1, ja.