Dreispaltiges Layout, clearing-Problem mittlere Spalte

akb · #1 (**permalink**) 20.08.2010, 15:27

Hallo,

ich stehe gerade vor einem kleineren Problemchen. Und zwar habe ich ein dreispaltiges Layout. Angelegt ist es in einer Form, wie ich es heute nicht mehr machen würde, allerdings kann ich wegen des CMS' nicht einfach ohne erheblichen Mehraufwand das Markup ändern. Deshalb suche ich einen Weg, es ohne Markup-Änderung nur über CSS zu "fixen", finde allerdings irgendwie keinen funktionierenden Weg.

Das Layout ist in der Form

HTML-Code:

<div id="left"></div>
<div id="right"></div>
<div id="content"></div>

aufgebaut. Die linke Spalte floatet links, die rechte rechts und der Content holt sich den Abstand durch einen margin nach links und rechts.

HTML-Code:

<style type="text/css">
#left { width:200px; float:left; }
#content { margin:0 220px; }
#right { width:200px; float:right; }
</style>

Wenn ich nun im Content weitere Elemente habe und darin floatende Elemente (bspw. Bilder mit Text) wieder clearen will, so cleart er nicht nur darin, sondern auch die umgebenden Sidebars. Ein Konstrukt wie das folgende:

HTML-Code:

<div id="left">linker Inhalt</div>
<div id="right">rechter Inhalt</div>
<div id="content">
  <div id="text-mit-bild" class="clearfix oder-klasse-mit-clear-leftrightbothanything">
    <img style="float:left;" />
    <p>Text</p>
  </div>
  <p>Nachfolgendes Element.</p>
</div>

würde also das nachfolgende Element unter die Sidebars rutschen lassen. Irgendwie stehe ich da aber gerade auf dem Schlauch, denn: müsste das Clearing nicht auf der eigenen Ebene und nicht durch das Element hindurch zum nächsthöheren Elternelement passieren? Weiss jemand, wie ich das rein per CSS beheben kann?

Vielen Dank schonmal für Eure Mühen

Arne

heiko_rs · #2 (**permalink**) 20.08.2010, 15:35

Das Verhalten ist korrekt (Stichwort "Block Formatting Context", den die mittlere Spalte braucht).

Hat das ganze eine px-Breite?

akb · #3 (**permalink**) 20.08.2010, 15:58

Hallo Heiko,

die floatenden Spalten selbstverständlich schon, die Content-Spalte aber nicht. Da stelle ich die Breite nur über die margins her. Warum, kann ich in der Hinsicht was umbiegen?

Edit: Und das Gesamtkonstrukt hat auch eine px-Breite... ein zentrierter Wrapper über die ganze Seite.

heiko_rs · #4 (**permalink**) 20.08.2010, 16:16

Zitat:

Zitat von akb

Und das Gesamtkonstrukt hat auch eine px-Breite

Meinst Du "eine" oder "keine"?

akb · #5 (**permalink**) 20.08.2010, 16:32

Zitat:

Zitat von heiko_rs

Meinst Du "eine" oder "keine"?

Eine. 932px für den Wrapper. Darin linke und rechte Spalte mit fixer Breite, Content ergibt sich ohne festgelegt zu sein aus inherited (932 vom Wrapper) minus margin links und rechts.

Edit:

HTML-Code:

<style type="text/css">
  #wrapper { width:932px; margin:0 auto /* horizontale Zentrierung */; }
  #left { width:200px; float:left; }
  #content { margin:0 220px; }
  #right { width:200px; float:right; }
</style>
<body>
  <div id="wrapper">
    <div id="left">linker Inhalt</div>
    <div id="right">rechter Inhalt</div>
    <div id="content">
      <div id="text-mit-bild" class="clearfix oder-klasse-mit-clear-leftrightbothanything">
        <img style="float:left;" />
        <p>Text</p>
      </div>
      <p>Nachfolgendes Element.</p>
    </div>
  </div>
</body>

heiko_rs · #6 (**permalink**) 20.08.2010, 16:34

Dann gib auch der mittleren Spalte eine Breite und floate sie (margins anpassen).

akb · #7 (**permalink**) 21.08.2010, 17:16

Zitat:

Zitat von heiko_rs

Dann gib auch der mittleren Spalte eine Breite und floate sie (margins anpassen).

Danke Dir, hab's gerade umgesetzt und es sieht alles prima aus. Vielen herzlichen Dank

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem beim 2 Layout Homepage	arek-1	CSS	13	03.08.2010 11:27
Layout Problem	AndyTrendy	CSS	6	02.08.2009 22:16
3 Spalten Layout - mittlere Spalte dynamisch	stefan133	CSS	6	18.06.2009 08:13
Ein Layout Problem	Snorfes	CSS	2	10.06.2009 15:27
Problem mit mehrspaltigem Layout	RalfEggert	CSS	2	05.04.2004 16:20