nicht angemeldet
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>