[CSS/HTML]: 3-SpaltenLayout IE verzieht das mittlere Div

krazy-krizi · 4. Februar 2008

guten tag forummler ;-)
ich hab ein problem mit meinem css und finde nicht das.
möglicher weise ist schon der ansatz wie ich das problem lösen möchte falsch.
was ich haben will ist eigentlich ganz simple:
einen header, unter dem header eine horizontale navigation, dann ein 3spalten layout (links, mitte, rechts) und zum schluss noch einen footer.
ich kopier einfach mal den ganzen code hierrein, vieleicht findet ihr irgendwo einen denkfehler oder ihr kommt, wie ich, zum entschluss das der ie das einfach nicht richtig anzeigen kann. ^^
im firefox sieht alles so aus, wie es sein sollte, im IE dagegen wird der mittlere teil einfach auf die ganze breite aus gedehnt, und der text steht anschliessend unter elementen, welche links und rechts sind.

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>HTML und CSS</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <link rel="stylesheet" type="text/css" href="ausrichtung.css" />
  </head>
  <body>
    <div id="head">
      <i>LOGO etc...</i>
    </div>
    <div id="navi">
      Navigation Navigation Navigation Navigation Navigation Navigation Navigation Navigation Navigation Navigation Navigation 
    </div>
    <div id="middle">
      <div id="left">
        <fieldset>
          <legend>Men&uuml;</legend>
            <ul>
              <li>Men&uuml;</li>
              <li>Men&uuml;</li>
              <li>Men&uuml;</li>
              <li>Men&uuml;</li>
            </ul>
        </fieldset>
      </div>
      <div id="right">
        <fieldset>
          <legend>Login</legend>
          Login Login Login Login 
        </fieldset>
        <fieldset>
          <legend>Sprache</legend>
            <ul class="liegend">
              <li>Sprache</li>
              <li>Sprache</li>
              <li>Sprache</li>
              <li>Sprache</li>
            </ul>
        </fieldset>
      </div>
      <div id="center">
        <h1>Lorem ipsum 1</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        <h2>Lorem ipsum 2</h2>
        <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
        <h3>Lorem ipsum 3</h3>
        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
    <div id="footer">
      D!-SIGN @ krizi - 2008
    </div>
  </body>
</html>

CSS: Main

Code:

/* ALGEMEINE EIGENSCHAFTEN */
body {
  border: 1px solid black;
  margin: 0px auto;
  width: 800px;
}

/* FIELDSET & LEGEND */
fieldset, legend {
  display: block;
  border: 1px solid black;
  margin: 5px;
}

legend {
  font-weight: bold;
  padding: 5px;
}

/* DIV */
div {
  overflow: auto;
}

.clear {
  float:clear;
}

/* TABLES */
table {
  width: 100%;
  text-align: justify;
}

th {
  font-weight: bold;
  font-size: 110%;
}

.numeric {
  text-align: right;
  width: 1px;
}

.little {
  width: 1px;
}

/* INPUT, TEXTAREA */
input, textarea {
  width: 200px;
}


/* AUFZÄHLUNGEN */
ul {
  margin: 0px;
  padding-left: 20px;  
}

li {

}

ul.liegend {
  padding: 0px;
  margin: 0px;
}

ul.liegend li {
  float: left;
  list-style-type:none;
  margin: 3px;
  padding: 0px;
}

CSS: Ausrichtung

Code:

/* HEAD */
#head {
  height: 100px;
}

/* NAVIGATION */
#navi {
  border-bottom: 1px dotted black;
}

/* LEFT SIDE */
#left {
  float: left;
  width: 150px;
  margin: 3px;
  height: 99%;
  padding: 0px;
}

/* RIGHT SIDE */
#right {
  float: right;
  top: 0px;
  right: 0px;
  width: 150px;
  margin: 3px;
}

/* CENTER */
#center {
  padding: 5px;
  overflow: hidden;
}

/* MIDDLE */
#middle {
}

/* FOOTER */
#footer {
  border-top: 1px dotted black;
  padding-top: 15px;
  text-align: center;
  font-size: 80%;
}

Bildlich:

ich bedank mich schonmal im voraus wer sich das ganze anschaut und den fehler im ie lösen/umgehen kann.
thx & greez krizi

krazy-krizi · 5. Februar 2008

für alle die es interessiert ich hab das problem gelöst indem ich dem center-div eine bestimmte breite gegeben habe, vielicht nicht die schönste lösung, und weiss auch nicht wie sich verhält mit mehr inhalt aber vorübergehend ok.

HTML:

/* CENTER */
#center {
  padding: 5px;
  overflow: hidden;
  width: 460px;
  margin: auto;
}

izi, greez krizi...

Suche

[CSS/HTML]: 3-SpaltenLayout IE verzieht das mittlere Div

krazy-krizi

Ensign

krazy-krizi

Ensign

Ähnliche Themen