[HTML/CSS] Spalten-Layout

[Matze]

Hi zusammen,

ich habe an meiner Website bissl was geändert und nun stimmt das Layout nicht mehr ganz.
Es geht um diese Seite. Der erste Eintrag ist immer genauso hoch wie der Inhalt der rechten Sidebar. Etwas deutlicher sieht man es hier.

Der Code sieht prinzipiell so aus:

HTML-Code:

<!-- ja, Sidebar zuerst, denn anders ging es nicht und hat so auch Vorteile -->
<div id="sidebar">

</div>

<div id="linkes_feld">
    <div>
        Eintrag 1
        <div style="clear: both"></div>
    </div>
    <div>
        Eintrag 2
        <div style="clear: both"></div>
    </div>
</div>

Code:

#sidebar {
    float: right:
    width: 250px;
}

#linkes_feld {
    margin-right: 260px;
}

Eigentlich müsste das unabhängig voneinander sein, da sich die Container nicht überlappen. Auch mit Firebug & Co. komme ich nicht weiter.
Seht ihr einen Fehler?

Das ist übrigens bei den gängigsten Browsern so. Liegt also definitiv an meinem Code.

Edit: Ich habe den Code oben ergänzt. Der Übeltäter ist das "clear: both" innerhalb der Eintragstexte (danke Frederic). Ich verstehe aber nicht, warum es daran liegt, da sich das nur aufs direkt übergeordnete Div auswirken sollte. Und "clear: both" benötige ich ... :?

[s.h.a.r.k]

Also ich handhabe ein zweispalten-Layout immer so:

Code:

<div class="container">
  <div style="float: left;" class="content">
    <div class="eintrag eintrag-1"></div>
    <div class="eintrag eintrag-2"></div>
  </div>
  <div style="float: right;" class="sidebar"></div>
  <div style="clear: both;" class="clearer"></div>
</div>

Habe nun extra das CSS in die HTML-Tags übernommen. War zu faul das noch separat zu machen :mrgreen:

[Matze]

Ja, so mache ich das i.d.R. auch. Nur bei einer fixen Spaltenbreite rechts und einer dynamischen links hat das bei mir nicht mehr hingehauen.

[s.h.a.r.k]

Da kenne ich auch nur diesen "margin-Trick": http://stackoverflow.com/questions/1...h-on-same-line (zweiter Beitrag bei mir)

[Matze]

Vielen Dank Armin, es funktioniert.
Leider verstehe ich nicht weshalb. D.h. beim nächsten Problem muss ich evtl. wieder fragen, da das für mich unlogisch ist. :gruebel:

Edit: Nur geht das nun im IE7 nicht mehr.

[s.h.a.r.k]

Keine Ahnung, warum man das so machen muss. CSS bzw. wohl eher der Umgang damit ist mir allgemein eh eher suspekt :mrgreen: Ich kenne eben nur einige Workarounds, die aber meist zu weiteren Problemen führen.

[S2B]

Ich meine, dass sich clear global auswirkt, solange der übergeordnete Container nicht ebenfalls ein float gesetzt hat. Alternative wäre evtl. noch overflow: hidden. ;)

[Matze]

Zitat:

Zitat von S2B (Beitrag 1070465)

Ich meine, dass sich clear global auswirkt, solange der übergeordnete Container nicht ebenfalls ein float gesetzt hat. Alternative wäre evtl. noch overflow: hidden. ;)

Hm, dann müsste ich "clear" irgendwie dynamisch einfügen.
"overflow" ist doch nur dazu da, wie zu großer Inhalt gehandhabt wird (Scrollbalken anzeigen oder nicht etc.). Wie meinst du, würde mir das weiterhelfen?

Edit: Ich füge "clear" nun dynamisch ein. Mal sehen, ob es nun geht. ;)
Dass sich das global auswirkt, wenn im Container nichts gefloatet wird, wusste ich nicht. Das finde ich eigentlich auch etwas seltsam.

[alcaeus]

Moin,

anstatt clearing-Tags zu verwenden solltest du dir mal clearfix angucken. Anstatt sowas zu schreiben:

Code:

<div id="sorrounding">
  <div id="content" style"float:left;"></div>
  <div id="sidebar" style="float:left;"></div>
  <div id="clearer" style="clear:both;"></div>
</div>

kannst du einfach sowas machen:

Code:

<div id="sorrounding" class="clearfix">
  <div id="content" style"float:left;"></div>
  <div id="sidebar" style="float:left;"></div>
</div>

Guck dir mal die verlinkte Seite an. Du kannst clearing-Tags und clearfix parallel einsetzen, d.h. du kannst einen fliessenden Wechsel machen.

Greetz
alcaeus

[Matze]

Hallo Andi,

danke. Das sieht nett aus. :)
Der Nachteil ist jedoch die Browserweiche (Conditional Comments). Davon bin ich eigentlich ein absoluter Gegner ...