Container verrutschen

J

joerg2011

Grünschnabel
Hallo,
ich möchte ein einfaches CSS-Layout (mit Kompozer) erstellen mit Header, Menu und Content, wobei Menu und Content nebeneinander unter dem Header stehen. Menu und Content habe ich mit px- Werten in der Breite definiert. Wenn ich dem Menu einen Rahmen (border) gebe, verrutscht der Content nach unten, wenn ich im Browser die Ansicht kleiner zoome. Woran liegt das?

Vielen Dank für Antworten!

Hier mein Code:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>testseite</title><style type="text/css">
#header {
  border: 1px solid #990000;
  width: 948px;
  height: 98px;
}
#menu {
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  width: 198px;
  float: left;
  min-height: 400px;
}
#content {
  width: 750px;
  float: left;
  min-height: 400px;
  background-color: white;
}

</style></head><body style="width: 950px; margin-right: auto; margin-left: auto;">
<div id="header">Header<br>
</div>
<div id="menu">Menu</div>
<div id="content">Content</div>


</body></html>
 
Der Rahmen kann schlecht kleiner als 1 Pixel werden. Die Breite der Kästen kann aber frei gezoomt werden. In Summe überschreitet dann die Breite + Rahmen die Gesamtbreite.

Habe deinen Code mal angepasst, so wie man das zwei Spalten Layout normalerweise aufbaut. Nur ein paar kleine Änderungen am CSS und schon ist dein Problem auch nicht mehr da.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>testseite</title><style type="text/css">
#header {
  border: 1px solid #990000;
  width: 948px;
  height: 98px;
}

#menu {
  border: 1px solid #990000;
  border-top:none;
  width: 198px;
  float: left;
  min-height: 400px;
}

#content {
  padding-left:200px;
  width: 750px;
  min-height: 400px;
  background-color: white;
}

</style></head><body style="width: 950px; margin-right: auto; margin-left: auto;">
<div id="header">Header<br>
</div>
<div id="menu">Menu</div>
<div id="content">Content</div>


</body></html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück