drei DIVs nebeneinander

Status
Nicht offen für weitere Antworten.
F

Fiberman

Mitglied
Hallo,

ich habe drei div's nebeneinander und in der Mitte den Inhalt. Wenn der Inhalt länger wird als die Höhe des Rahmen aussen herum, überlappt der Inhalt. Wie kann ich das bewerkstelligen, das der Rahmen mit wächst.

(Der Explorer zeigt das fälschlicherweise ja schon richtig an, aber der Firefox lässt immer überlappen)

HTML: 
<html>
<head>
<title>titel</title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>

<div id="cont">
 <div id="links">links</div>
 <div id="mitte">mitte</div>
 <div id="rechts">rechts</div>
</div>


</body>
</html>


css:

HTML: 
<!--
html,body{
  margin: 0px;
  padding: 0px;
  text-align:left;
  height: 500px;  
  background-color: #ff0000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000000; 

}

#cont{
  position:absolute;
  height: 560px;
  left: 50%;
  width: 760px;
  margin-left:-380px;
  border: 1px solid #000000;  clear:both;
}
#links{
  height: 100%;
  width: 15px;
  background-color: #FFFFCC;
  float:left;
}
#mitte{
   background-color: green;
   float:left;
   width: 300px;
   height: 600px;
}

#rechts{
  height: 100%;
  width: 15px;
  background-color: #E0D9D9;  
  float:right;
}

-->

Danke
 
Erweitere den CSS-Code mit folgender Regel:

CSS: 
div.clear {
clear: both;
height: 0;
line-height: 0;
margin: 0;
padding: 0;
font-size: 0;
}
und notiere das DIV nach den floatenden DIVs:

HTML: 
<div id="cont">
 <div id="links">links</div>
 <div id="mitte">mitte</div>
 <div id="rechts">rechts</div>

 <div class="clear">&nbsp;</div>
</div>
 
Nein, geht leider nicht!
Die Mitte schiesst immer noch im Firefox über den Rahmen hinaus.

Dir ist übrigens ein : statt einem ; untergekommen.
 
Zuletzt bearbeitet:
Danke für den Hinweis bzgl. des Tippfehlers, habe ihn gleich korrigiert ;)

Es kann auch nicht funktionieren, da das DIV#cont eine Höhenangabe besitzt, und sich deshalb nicht nach unten ausdehnt.
 
Ist eigentlich logisch, das der Content dann nicht mit wachsen kann, wenn der eine feste Größe hat.

Jetzt geht es schonmal FAST so wie ich es mir vorstelle.

Jetzt hab ich die Spalte #links und #rechts auf 100%, aber die bekommen jetzt keine Informationen mehr über die Höhe. Wie bekomme ich die jetzt auf 100% Höhe? Ist das der berühmte "faux columns" effekt?


Danke michaelsinterface für die qualifizierte und schnelle Hilfe.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück