[CSS] Floating Problem: Clear macht mein Layout kaputt

meisteralex

Lieutenant
Registriert
Juni 2003
Beiträge
552
Hi Leute, ich hab hier ein Layout, welches aus einem Header, 3 Spalten und einem Footer besteht - also so wie das auf Computerbase.de.
Die Linke Spalte wird dabei mit float:left und die rechte Spalte mit float:right in Position gebracht. Beide werden jeweils mit width:200px in feste breite gebracht, so das die mittlere Spalte sich der größe des Fensters anpasst und somit als Content dient.

Mein Problem: In der mittleren Spalte (Content) will ich nun Ihalt reinbringen, welcher Bilder enthält, die wiederrum mit float:left oder float:right in den Textfluss gebraucht werden. Dies ist auch kein Problem, wenn ich jedoch einen neuen Absatz machen will und clear:both mache, wirkt sich dieses clear nicht nur auf meinen content-bereich aus, sondern auf das gesammt Layout- sprich, die floats von der rechten und linken Spalte werden zerschossen und der Textfluss dehnt sich darüber hinaus aus.


Hat jemand eine idee ?
 
Da ich nicht weiß, wie du es genau aufgebaut hast, kann ich nur vermuten, wo das Problem liegt.

Wenn du nur für die seitlichen Spalten Container benutzt, dann kann ein Browser natürlich nicht wissen, dass die Clear-Angabe sich nur auf die mittlere Spalte beziehen soll und nicht auf die seitlichen Container.

Wenn du dagegen für die mittlere Spalten ebenfalls einen Container einrichtest, dann müsste eine darin(!) befindliche Clear-Angabe sich nur auf diesen Container-Inhalt beschränken, so dass die Spalten unangetastet bleiben.
 
genau das habe ich gemacht (falls du mit container <div> meinst)
in der mitte ist ein container in dem sich alles befindet, trotzdem wirkt sich ein clear:both auch auf die ränder aus
 
Ja, ich meinte DIV-Tags. Ist deine Seite online, dass man sich das mal ansehen kann?
 
ne noch nicht ganz , hier ist der stylesheet

HTML:
#header
{
	background-color: #FFFFFF;
	background-image: url(./img/header_background.jpg);
	background-repeat: repeat-x;
	padding: 0px 0px 0px 0px;
	border: 1px solid #000000;
	border-left: 0px;
	border-right: 0px;
	margin: 10px 0px 0px 0px;
	height: 64px;
	overflow:hidden;
}

#headermenue {
	overflow:hidden;
	background-color: #FFFFFF;
	padding: 0px 0px 0px 0px;
	border: 1px solid #000000;
	border-left: 0px;
	border-right: 0px;
	margin: 6px 0px 6px 0px;
	font-size:12px;
	text-align:center;
	font-weight:bold;
}

#menuearea
{
 
	width:200px;
	float:left;
	padding:0px;
	border:0px;
	margin:0px;
}


#contentarea
{
 
	padding:0px;
	border:0px;
	margin: 0px 150px 0px 200px;
	padding: 0px 12px 0px 12px;
}

#rightpanelarea
{
   
	width:150px;
	float:right;
	padding:0px;
	border:0px;
	margin:0px;
}

#footerarea
{
  	clear:both;
	background-color:#FFFFFF;
	height:30px;
	padding:0px;
	margin: 6px 0px 6px 0px;
	overflow:hidden;
	border-bottom: 1px solid #000000;
	border-top: 1px solid #000000;
	border-left:0px;
	border-right:0px;
}

dabei ist die menuearea links und das rightpanel rechts. die contentarea ist in der mitte

wenn ich nun im <div> contentarea ein clear:both mache passiert der fehler
 
Ich meinte nicht den CSS-Code, sondern den Quellcode der HTML-Seite. Vielleicht ist dort ja eine Kleinigkeit nicht in Ordnung, die man schnell mal übersehen kann?
 
hier bitte sehr

HTML:
<body>

<div id='header'><img src="./img/header_links.jpg" align="left"><img src="./img/header_rechts.jpg" align="right"></div>

<div id="headermenue">Zum Forum -- Zur Page -- Zum Emailclient -- Neuste Bilder</div>
 
<div id='menuearea'>hier ist der menuebereich</div>

<div id="rightpanelarea">hier ist rechts</div>

<div id='contentarea'>hier ist der breit, wo das "style='clear:both'" reinkommen soll</div>

<div id='footerarea'>
hier ist der footer
</div>

</body>
 
Zurück
Oben