✔ Hilfe bei clear:both; erbeten

[Eiszwerg]

Halli Hallo nochmal ;-)

Ich habe folgenden Code erbastelt:

<div id="wrap">
  <div id="top">
    Top
  </div>    
  <div id="menu">      
    <ul>
      <li><a href="index.php?n=start" title="Startseite">Startseite</a></li>
    </ul>
  </div>
  <div id="clear">
    <div id="content">
      <h2>Herzlich willkommen in Eckernf&ouml;rde</h2>
      <div id="text_links">
        <p class="text">
          Wir begr&uuml;&szlig;en Sie recht herzlich...
        </p>
      </div>
      <div id="text_rechts">
        <p class="text">
          Foobar
        </p>
      </div>
    </div>
  </div>
  <div id="bottom">
    bottom
  </div>
</div>

mit folgender CSS-Geschichte

body,html
{
  height:100%;
  font-family:arial;
  font-size:12px;
  background-color:#1144AA;
}

#wrap
{
  position: absolute;
  /*height:550px;*/
  width:750px;
  margin-left:-375px;
  left:50%;
  margin-top:50px;
}

#top
{
  height:100px;
  background-color:#3366CC;
  background-image:url(../gfx/top.jpg);
}

#menu
{
  height:20px;
  font-weight:bold;
  background-image:url(../gfx/menu.jpg);
  background-repeat:repeat-x;
}

#content
{
  padding:2px 10px 2px 10px;
  /*height:325px;*/
  overflow:auto;
  background-color:#ffcc66;
}

#text_links
{
  width:48%;
  float:left;
  /*border:1px solid black;*/
}

#text_rechts
{
  float:right;
  width:48%;
  /*border:1px solid black;*/
}

#bottom
{
  height:100px;
  background-color:#3366CC;
  background-image:url(../gfx/bottom.jpg);
}

#clear
{
clear:both;
}

Ich fürchte, ich hab da mit dem clear:both; etwas nicht verstanden. Im FF sieht alles total toll aus, aber im IE7... prrr...

Eventuell hat jemand einen Tipp?!

 

[Eiszwerg]

Okay, hatte für #content keine Größe gesetzt.
Lag wohl daran

 

[Maik]

Hi,

Okay, hatte für #content keine Größe gesetzt.

das Stichwort lautet in diesem Fall: hasLayout.

<style type="text/css">
...
#content
{
  padding:2px 10px 2px 10px;
  /*height:325px;*/
  overflow:auto;
  background-color:#ffcc66;
}
...
</style>
<!--[if IE]>
<style type="text/css">
#content {height:1%;}
</style>
<![endif]-->

mfg Maik