1
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.
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
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