nicht angemeldet
CSS "float" läuft über Container
Hallo!
Kurz vor dem Wochenende plagt mich noch ein CSS Problem, bei dem ich hoffe, Ihr könnte mir helfen:
Ich habe ein CSS definiert, welches grob aus einem Container und zwei Spalten darin besteht:
+---------+
- XXX OOO +
- XXX OOO +
- XXX OOO +
+---------+
Nun hab ich nicht so den Durchblick mit CSS, habe die linke Spalte über "float:left" definiert, damit sie auf gleicher Höhe mit der rechten Spalte erscheint. Das Problem: Wenn ich die rechte Spalte mit Text fülle (ohne "float", dann erweitert sich der ContainerRahmen entsprechend, bei der linken mit "float" geht die Spalte über den Rahmen hinaus. Eine Beispieldatei zum nachvollziehen habe ich beigefügt.
Was mache ich falsch, wie löse ich's? Für jede Hilfe wäre ich dankbar!
Gruss und Kuss,
Antje
------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#container {
width: 400px;
border: 1px solid red;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#sidebar_a {
float: left;
width:180px;
background-color: rgb(235, 200, 200);
}
#sidebar_b {
width: 180px;
margin-left: 200px;
background-color: rgb(235, 235, 235);
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar_a">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div id="sidebar_b">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla</div>
</div>
</body>
</html>
-
Hallo,
Nun hab ich nicht so den Durchblick mit CSS, habe die linke Spalte über "float:left" definiert, damit sie auf gleicher Höhe mit der rechten Spalte erscheint. Das Problem: Wenn ich die rechte Spalte mit Text fülle (ohne "float", dann erweitert sich der ContainerRahmen entsprechend, bei der linken mit "float" geht die Spalte über den Rahmen hinaus. Eine Beispieldatei zum nachvollziehen habe ich beigefügt.
probier mal folgendes:
#container { float:left;
Grüsse
Cyx23
-
Hallo Ihr Drei!
Vielen Dank für Eure Hilfe. Mit dem letzten Tip (container float) habe ich das Problem sehr einfach in den Griff bekommen.
Kisses,
Antje-
Hallo,
Vielen Dank für Eure Hilfe. Mit dem letzten Tip (container float) habe ich das Problem sehr einfach in den Griff bekommen.
Und margin:auto funktioniert dann noch wie gewünscht? In welchem Browser?
viele Grüße
Axel
-
Hallo,
Vielen Dank für Eure Hilfe. Mit dem letzten Tip (container float) habe ich das Problem sehr einfach in den Griff bekommen.
Und margin:auto funktioniert dann noch wie gewünscht? In welchem Browser?
nun, dann sollte man nochmals die alternative Lösung nennen:
<br style="clear:both">
</div>
</body>
</html>Und dann aber auch ggf. bei s..b die
margin-left: 200px; anpassen und evtl.
dort auch noch ein float:left; einfügen.Grüsse
Cyx23
-
-
-
-
Hi,
Kurz vor dem Wochenende plagt mich noch ein CSS Problem, bei dem ich hoffe, Ihr könnte mir helfen:
Ich habe ein CSS definiert, welches grob aus einem Container und zwei Spalten darin besteht:
Nun hab ich nicht so den Durchblick mit CSS, habe die linke Spalte über "float:left" definiert, damit sie auf gleicher Höhe mit der rechten Spalte erscheint. Das Problem: Wenn ich die rechte Spalte mit Text fülle (ohne "float", dann erweitert sich der ContainerRahmen entsprechend, bei der linken mit "float" geht die Spalte über den Rahmen hinaus. Eine Beispieldatei zum nachvollziehen habe ich beigefügt.Klar, so ist float definiert. Ein ge-float-etes Element beeinflußt die Größe des Parent-Elements nicht.
Wenn Du das dennoch willst: setze vor das Ende des parent-Elements ein <br style="clear:both;"> oder ein anderes Element, daß nicht clear:none; hat.
cu,
Andreas--
MudGuard? Siehe http://www.mud-guard.de/ -
Hallo,
Kurz vor dem Wochenende plagt mich noch ein CSS Problem, bei dem ich hoffe, Ihr könnte mir helfen:
Ich habe ein CSS definiert, welches grob aus einem Container und zwei Spalten darin besteht:+---------+
- XXX OOO +
- XXX OOO +
- XXX OOO +
+---------+
Es gibt kein HTML-Element welches einen Container beschreiben kann. Das Element DIV ist ein nicht näher definiertes Blocklevel-Element, kein Container.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#container {
width: 400px;
border: 1px solid red;
margin-left: auto;
margin-right: auto;
padding: 10px;
}#sidebar_a {
float: left;
width:180px;
background-color: rgb(235, 200, 200);
}#sidebar_b {
width: 180px;
margin-left: 200px;
background-color: rgb(235, 235, 235);
}</style>
</head>
<body>
<div id="container"><div id="sidebar_a">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div id="sidebar_b">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla</div>
<br style="clear:left;">
</div>
</body>
</html>Erklärung: Die Eigenschaft float:left löst das Element div.sidebar_a aus dem normalen Textfluss. Normale, im Textfluss befindliche Elemente fließen um dieses Element herum. Deshalb ergibt sich die Höhe des umgebenden DIV-Elements als Gesamthöhe aller normal fließenden Elemente. Mit der Eigenschaft clear:left des BR-Elements (es kann auch ein beliebiges anderes Element sein) zwingt man dieses unter das div.sibebar_a in den normalen Textfluss, wodurch es die Gesamthöhe des umgebenden DIVs beeinflusst.
viele Grüße
Axel