nicht angemeldet
Hallo!
Ich hab mir schnell ein Seitenlayout mit div-Containern gebastelt und hab aber ein Problem beim Zoomen. Wenn ich relativ weit herauszoome, wird der Inhaltscontainer mit dem blauen Hintergrund plötzlich in einer neuen Zeile angezeigt. Außerdem ist eben dieser Container bei manchen Zoom-Stufen am rechten Rand nicht ganz bündig. Das Problem tritt mit mehreren Browsern auf (Firefox, Chrome, IE). Ich hab schon ein paar mal nachgerechnet, im CSS ergibt die Breite von Menü und Inhalt insgesamt genau 900 Pixel, Padding und Border eingerechnet. Ich kann mir wirklich nicht erklären, woran das liegen könnte. Kann ich das irgendwie abstellen oder liegts einfach am Rendering-Verfahren des Browsers? Wär super wenn das jemand testen könnte :-)
mfg
index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>
</title>
</head>
<body>
<div id="page">
<div id="banner">
Banner
</div>
<div id="wrapper">
<div id="menu">
Menü <br>
<br>
</div>
<div id="content">
<h1>Meine Überschrift</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="clear:both;"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
stylesheet.css
body {text-align:center; margin:0px;padding:0; border:0}
#page {width:900px; margin:auto; text-align:left;}
#banner {background-color:red; height:400px;}
#wrapper {background-color:yellow}
#menu {padding: 5px; background-color: green; width: 193px;float:left}
#content {width:675px; border-left: 2px solid black; background-color: blue; padding: 10px; float:left}
#footer {width:900px; background-color:black; height: 200px}