[molsch]: Positionierung von Div-Containern

Ich würde gerne ein ganz einfaches Layout mit einem Header, einer Navigation, einem Content und einem Footer erstellen. Hier ein Bild zur besseren Veranschaulichung:
http://fhoffmann.wagner52388.de/projekt2/img/layout.jpg
Im Firefox funktioniert das ganze auch ohne Probleme aber der IE rückt den Content unter die Navigation (http://fhoffmann.wagner52388.de/projekt2). Hier mal der relevante Teil meiner CSS Datei:

div#wrapper {
margin:0 auto;
width: 700px;
border-width:1px;
border-style:dashed;
border-color:blue;
text-align:center;
}

div#header {
width: 700px;
height: 150px;
border-width:1px;
border-style:dashed;
border-color:#800000;
text-align:left;
}

div#navi {
float: left;
width: 100px;
border-width:1px;
border-style:dashed;
border-color:#800000;
padding: 20px;
text-align:left;
}

div#content {
margin-left: 140px;
width: 520px;
border-width:1px;
border-style:dashed;
border-color:#800000;
padding: 20px;
text-align: justify;
}

div#footer {
width: 660px;
border-width:1px;
border-style:dashed;
border-color:#800000;
padding: 20px;
text-align: center;
}

  1. Grüße,

    Im Firefox funktioniert das ganze auch ohne Probleme aber der IE rückt den Content unter die Navigation (http://fhoffmann.wagner52388.de/projekt2). Hier mal der relevante Teil meiner CSS Datei:

    div#content {
    margin-left: 140px;

    mach draus margin-left:150px; zB.

    IE hat da etwas sonderbare Methoden die Borderbreite zu errechnen. ist bekannt als IE FLUCH!!.

    MFG
    bleicher

    --
    __________________________-
    Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
    Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
    Boccaccio
    1. div#content {
      margin-left: 140px;

      mach draus margin-left:150px; zB.

      Danke schonmal für deine Hilfe. Allerdings wird der Content nur um 10px weiter nach rechts gerückt. Im IE wird der Wrapper vergrößert. Der Firefox lässt den Content einfach über den Wrapper hinaus gehen. Würde ein Update des Internet Explorers das Problem "beheben"?

      1. Grüße,

        Danke schonmal für deine Hilfe. Allerdings wird der Content nur um 10px weiter nach rechts gerückt. Im IE wird der Wrapper vergrößert. Der Firefox lässt den Content einfach über den Wrapper hinaus gehen. Würde ein Update des Internet Explorers das Problem "beheben"?

        folge dem link und lies mehr^^ dort steht alles was ich darüber weiss^^.

        MFG
        bleicher

        --
        __________________________-
        Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
        Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
        Boccaccio
  2. Hallo!

    Wie mir scheint, hast du bei deiner pixelgenauen Rechnerei die Border(s) vergessen. Im FF überlappen sich die beiden DIVs, während der IE (7)* das Content-Div unter das Navi-Div schiebt.

    Gruß Gunther

    * Andere IE-Version habe ich nicht zur Verfügung

    1. Hallo!

      Wie mir scheint, hast du bei deiner pixelgenauen Rechnerei die Border(s) vergessen. Im FF überlappen sich die beiden DIVs, während der IE (7)* das Content-Div unter das Navi-Div schiebt.

      Schön zu sehen, dass du es jetzt hingekriegt hast. Und wenn du jetzt noch aus deinem <img> Tag
      <img src="img/lime.jpg" border="0" alt="Limette" title="Limette" align="left" />
      die in der Strict-Variante nicht erlaubten Attribute border und align entfernst, und die gewünschten Foramtierungen per CSS vornimmst, dann wäre deine Seite auch noch valide!

      Gruß Gunther