Darstellungsproblem IE Floating DIVs (3 Spalten)

pro-logic · 15.12.11, 14:48

Guten Tag allerseits!

Ich habe eine Seite mit einem Drei-Spalten-Layout und habe die gewollte darstellung im FF aber nicht im IE. Jetzt experimentiere ich schon eine ganze Zeit und komme nicht dahinter was da schief läuft. Den meisten dieser Darstellungsprobleme liegt ein Zwei-Spalten-Layout zugrunde, was ich nicht auf mein Problem übertragen kann.

Ich würde mich freuen, wenn mir jemand erklären könnte was ich da nicht verstanden habe. (PS: html & css sind valid).

Vielen Dank im Voraus!
mfg PL

Die grobe Struktur der Seite:

Code:

<html><head></head>
<body>


<div id="body">
  <div id="navigation_sidebar">Navigation</div>
  <div id="content">Inhalt</div>
  <div id="right">Rechts</div>

  <div id="floatstop"></div>
</div>


</body>
</html>

Die Formatierung:

Code:

/* body ist der zentrierte rahmen, mit fester breite */
#body {
  width: 900px;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}


/* die navigationsleiste soll links sein und immer 100% height des parent-div haben */
#navigation_sidebar {
  float: left;
  width: 160px;
  height: 100%;
  position: absolute;
  margin: 0px 0px 0px 15px;
  padding: 230px 0px 0px 0px;
  background-color_ #000;
}


/* die content-box ist in der mitte */
#content {
  width: 525px;
  float: left;
  padding: 230px 0px 0px 0px;
  margin: 0px 10px 0px 190px;
}


/* die rechte spalte floatet nach rechts (soll später verschiende kleine texte enthalten) */
#right {
  float: right;
  padding: 230px 10px 0px 5px;
  margin: 0px 15px 0px 0px;
}



#floatstop {
  clear: both;
}

ewrson · 17.12.11, 11:03

Hi pro-logic,

ich habe mal ein beispiel erstellt.
Ich weiss jetzt nicht ob die spalten direkt nebeneinander sein sollen oder nicht.
Hoffe ich konnte dir damit weiterhelfen

Gruß

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    /* dies ist ein universal-selektor um alles auf null zu stellen, dieser wirkt auf alles! */
    *{
        margin: 0;
        padding: 0;
    }

    /* body ist der zentrierte rahmen, mit fester breite */
    #main{
        width: 900px;
        overflow: hidden;
        position: relative;
        margin: 0 auto;
    }
    
    /* die navigationsleiste soll links sein und immer 100% height des parent-div haben */
    #navigation_sidebar{
        float: left;
        width: 160px;
        height: 100%;
        /*margin: 0px 0px 0px 15px;*/
        padding: 230px 0px 0px 0px;
        color: #fff;
        background-color: #000;
    }
    
    /* die content-box ist in der mitte */
    #content {
        width: 525px;
        float: left;
        padding: 230px 0px 0px 0px;
        /*margin: 0px 10px 0px 190px;*/
        background-color: #ccc;
    }
    
    /* die rechte spalte floatet nach rechts (soll später verschiende kleine texte enthalten) */
    #right {
        float: right;
        padding: 230px 10px 0px 5px;
        /*margin: 0px 15px 0px 0px;*/
        background-color: #efefef;
    }
    
    #floatstop {
        clear: both;
    }
</style>
</head>
<body>
    <div id="main">
        <div id="navigation_sidebar">Navigation</div>
        <div id="content">Inhalt</div>
        <div id="right">Rechts</div>
        
        <div id="floatstop"></div>
    </div>
</body>
</html>

pro-logic · 19.12.11, 19:42

Hallo!

Danke für eure Mühe! Beides hat mich ein Stück weiter gebracht!

MfG PL