Zur Navigation

float left, float right, clear left, clear right - Problem

1 C)-(iLL@

Schon wieder muss ich mich ärgern und euch nerven :) Es geht um ein Float-Problem, das ich nicht überreiße, vielleicht weil es gar nicht geht - aber ich hoffe auf einen Tip der mir den Tag rettet.

Es geht um einen relativ einfachen Aufbau: Menü-div, Content-div, innerhalb diesen contents links und rechts floatende Bilder, Text natürlich... und - ja eben - und clearende Umbrüche.

Ziel wäre, dass innerhalb des Contents Bilder links und rechts floaten können, und dabei ein Text steht. Vor dem jeweils folgenden Bild möchte ich einen Absatz, der immer unter das Bild geht, damit die Texte nicht ineinanderfließen. Aber... da das Menü floatet, verursacht ein clear:left den Umbruch unter das Menü. Das will ich nicht!! :)) Rein von der Logik wäre es ja nicht verkehrt zu denken, dass innerhalb eines floatenden divs die clears nur für dieses Div gelten, und nicht für die divs, die außerhalb liegen (menü liegt ja nicht im content) - aber Pustekuchen, Logik hat mit Positionierung leider oft wenig zu tun.

Das Menü kann eine variable Höhe haben, und der Inhalt kann verschieden viel sein. Das abschließende clearende div soll verhindern, dass das Content-div bei wenig Inhalt weniger hoch als das Menü-div ist. Denn genau dieses Problem ergibt sich, wenn man das Menü anfängt absolut zu positionieren - das kann ich sogar verstehen, da es dann losgelöst ist.

Aber wie kann ich das lösen? Na ja, eine Tabelle, zwei Spalten (eine Menü, eine Content), zack zack und passt - aber ohne Tabellen? Ich hasse Layout-Tabellen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title></title>
</head>
<style type="text/css">
<!--
div#all { width: 90%; border: 1px solid #5F9EA0; font-family: Arial, Helvetica, sans-serif; }
div#menu { width: 160px; float: left; background: #B0E0E6; height: 400px; }
div#content { margin-left: 160px; background: #F0FFF0; }
p { margin: 0; padding: 10px; text-align: justify; }
.picleft, .picright { width: 250px; float: right; margin: 10px; background: #3CB371; height: 180px; }
.picleft { float: left; background: #4682B4; }
.cb { clear: both; }
.cl { clear: left; }
.cr { clear: right; }
-->
</style>
<body>
<div id="all">
  <div id="menu">
    (menu)
  </div>
  <div id="content">
    <div class="picleft">(picture)</div>
    <p>Nam blandit sapien nec neque feugiat sollicitudin. Maecenas sem velit, pellentesque et, cursus fermentum, elementum in, tortor. Fusce est augue.</p>
    <br class="cl" />
    <div class="picright">(picture)</div>
    <p>Nam blandit sapien nec neque feugiat sollicitudin. Maecenas sem velit, pellentesque et, cursus fermentum, elementum in, tortor. Fusce est augue.</p>
    <br class="cr" />
  </div>
  <div class="cb"></div>
</div>
</body>
</html>

Ich wäre echt total froh für einen rettenden Tip, das bringt mich zur Verzweiflung :( Ach ja, den IE muss ich dabei unterstützen. Vielen Dank für jede Hilfe.

Rudy

Edit: Ich habe einen Bock geschossen - das content-div hatte gar kein float - ich hab heute wohl ein Brett vorm Kopf.
Damit gehts:

div#all { width: 750px; border: 1px solid #5F9EA0; font-family: Arial, Helvetica, sans-serif; }
div#content { float: left; width: 590px; background: #F0FFF0; }

Leider muss der Inhalt eine fixe Breite haben. Mit ohne fixe Breite geht das wohl nicht? Damit mein Post nicht ganz nur zur allgemeinen Belustigung dient - wäre das auch mit variabler Breite möglich?

Vielen Dank

02.03.2006 13:07 | geändert: 02.03.2006 13:19

2 Jörg

Mit variabler Breite ist schwierig. Ich habe das so gelöst, dass ich mit einem Hintergrundbild des übergeordneten Elements in der Breite des Menüs den Hintergrund des Menüs anzeige, und es dann absolut drüber positioniere, z.B. auch hier im Forum. In dem komplexeren Fall meiner Webnotizen mit drei Spalten und einem übergeordnetn Element != body musste ich zusätzlich mithilfe eines Blind-Gif für den Inhaltscontainer noch eine Mindesthöhe in der maximalen Höhe des Menüs erzwingen (der IE kann ja leider kein min-height :/)

02.03.2006 13:43 | geändert: 02.03.2006 13:47

3 C)-(iLL@

Mit variabler Breite ist schwierig.
Ja, das habe ich bemerkt :| Das deckt sich damit, was ich hier gelesen habe:

Zitat von CSS-Technik.de
Jedes Element, das man floatet, wir dadurch automatisch zu einem Block-Element. Das bedeutet, dass man ihm sowohl eine Breite (width) als auch eine Höhe (height) zuweisen kann. Tatsächlich müssen Floats sogar eine zugewiesene Breite haben. Diese wegzulassen, ist ein häufig gemachter Fehler und während das manche Browser verzeihen, stolpern all diejenigen Browser darüber, die sich auf Webstandards besser verstehen.

Ich hab mich nun für die einfache Variante und fixer Breite entschieden, um Hilfsmitteln wie Blind-Gifs und Dummy-Bildern aus dem Weg zu gehen. Traurig ist, dass auch heutzutage immer noch solche Behelfstechniken notwendig sind, um ein ansprechendes tabellenfreies Layout zu erzeugen, wenn es mal etwas komplizierter wird (so wie der 'heilige Grahl' drei-Spalten-Layout).

Danke.

02.03.2006 15:39 | geändert: 02.03.2006 15:47

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]