nicht angemeldet
Problem mit zweispaltigem Layout
Ich habe eine Seite gebastelt, basierend auf dem Beispiel "Zweispaltiges Layout mit fester Breite" (<http://de.selfhtml.org/css/layouts/anzeige/2spaltig_breite.htm@title=siehe hier>)
Mein Problem ist folgendes:
Sobald das Menü (also das div mit dem float:left) höher ist, als die rechte Spalte, ragt das Menü über den Rahmen des Divs hinaus, statt es zu vergrößern.
Das Problem tritt im Firefox auf, im Internet Explorer funktioniert es (öfter mal was neues...).
Gibt es eine Lösung oder ein Workaround hierfür?
Zur besseren Nachvollziehbarkeit, hier mein vollständiger Quellcode:
<html>
<head>
<style type="text/css">
body {
color: black; background-color: white;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
padding: 10px 0;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#carryall {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 980px;
padding:10px;
border: 2px ridge silver;
}
div#header {
padding: 10px 0px;
border: 1px solid #000000;
margin-bottom: 10px;
padding: 5px;
background-color: #cccccc;
}
div#menu {
font-size: 12pt;
float: left;
width: 200px;
margin: 0;
padding: 0;
}
div#menu div {
padding:5px;
margin-top:5px;
margin-bottom:5px;
border: 1px dashed silver;
}
</style>
</head>
<body>
<div id="carryall">
<div id="header">
header text
</div>
<div id="menu">
<div>
menu item text 1
</div>
<div>
menu item text 2
</div>
<div>
menu item text 3
</div>
<div>
menu item text 4
</div>
</div>
<div id="content">
<p>ein wenig text</p>
</div>
</div>
</body>
</html>
-
Folgender Teil des CSS ist beim Kopieren rausgefallen:
div#content { margin-left: 220px; padding: 0px 10px; border: 1px dashed silver; } -
Bin eben auf die Lösung gestoßen:
Hinter dem "content" Div noch ein div einfügen:
<div style="clear:both"></div>Damit funktioniert es.
-
Hinter dem "content" Div noch ein div einfügen:
<div style="clear:both"></div>Zusätzliches HTML, wozu?
-
-
Sobald das Menü (also das div mit dem float:left) höher ist, als die rechte Spalte, ragt das Menü über den Rahmen des Divs hinaus, statt es zu vergrößern.
Works as designed.
Das Problem tritt im Firefox auf, im Internet Explorer funktioniert es (öfter mal was neues...).
Nein, der IE macht es falsch.
Gibt es eine Lösung oder ein Workaround hierfür?
Für funktionierendes Verhalten braucht es keinen Workaround. Für deine Erwartungshaltung aber schon.
-
Füge nach dem umgebenden gemeinsamen Element der beiden Spalten ein Pseudoelement ein (:after).
-
Erzeuge in diesem als Inhalt ein unsichtbares Zeichen, z.B. ein geschütztes Leerzeichen (U+0000) mit der content-Eigenschaft.
-
Stelle es als Block-Element dar (display-Eigenschaft).
-
Die Breite auf 100% gestellt (width)
-
Die Höhe auf 0 (height)
-
es stellt den Textfluss mittels clear wieder her
-
und zusätzlich gibts noch ein overflow: hidden; damit das Ding auf jedenfalls keinen Platz einnimmt.
Sollte in jedem modernen Browser den gewünschen Effekt liefern und der IE machts ohnehin falsch und dort passts dann auch.
Diese Technik nennt sich übrigens "clearfix"
alternativ nimmt man statt dem geschützen Leerzeichen irgend ein anderes Zeichen und stellt die visibility auf "hidden".
-