Chris: 2 float divs in div -> Höhe ist falsch :(

SELF-Forum

2 float divs in div -> Höhe ist falsch :(

Chris
– Informationen zu den Bewertungsregeln

Hi,

ich will gerne 2 Spalten als Content haben:

  
<!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">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>Unbenanntes Dokument</title>  
<style type="text/css">  
<!--  
#Content {  
 width:600px;  
 background-color: #00FF00;  
 min-height:200px;  
 height:200px;  
 margin      : 0px 0px 0px 0px;  
 padding      : 0px 0px 0px 0px;  
}  
  
#ContentLinks {  
 float:left;  
 width:250px;  
 background-color: #FFFF00;  
 margin      : 0px 0px 0px 0px;  
 padding      : 5px 0px 0px 5px;  
}  
  
#ContentRechts {  
 float:right;  
 width:250px;  
 background-color: #99FFFF;  
 margin      : 0px 0px 0px 0px;  
 padding      : 5px 0px 0px 5px;  
}  
-->  
</style>  
</head>  
  
<body>  
<div id="Content">  
 <div id="ContentLinks">Links</div>  
 <div id="ContentRechts">Rechts<br />  
 <br /> <br />  <br /> <br /> <br /> <br /> <br /> <br /><br /> <br />  
 langer Test usw.<br /> <br /> <br /> <br /> <br /> <br />  
 Noch länger</div>  
  
</div>  
</body>  
</html>

Im IE funktioniert es, in Opera und FF ist die grüne Box niedriger als die blaue, die grüne soll sich aber automatisch mit vergrößern. Wie schaffe ich das denn?

Danke schon mal.
Bye, Chris

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 2 float divs in div -> Höhe ist falsch :(

    Benjamin Buxbaum
    – Informationen zu den Bewertungsregeln

    Hi!

    Im IE funktioniert es, in Opera und FF(...)

    Wie bei jedem Satz, der mit "Im IE funktioniert es," beginnt, gilt auch hier die Antwort: "Der IE pfeift auf Standards/Spezifikationen und macht einfach, was er will."

    (...)ist die grüne Box niedriger als die blaue, die grüne soll sich aber automatisch mit vergrößern. Wie schaffe ich das denn?

    Durch float wird ein Element aus dem normalen Fluss genommen, demnach hat es keinen Einfluss mehr auf die Höhe des Elternelements. (#content) Dem kannst du entgegenwirken, indem du das Elternelement ebenfalls aus dem Fluss nimmst. (...und natürlich die feste Höhenangabe entfernst.)

    mfG
    Benjamin

    --
    Selfcode: ie:} fl:{ br:> va:) ls:< fo:( rl:? n4:# ss:| de:] js:| ch:? sh:( mo:? zu:)
    "And all those exclamation marks, you notice? Five? A sure sign of someone who wears his underpants on his head."
    (Terry Pratchett)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 2 float divs in div -> Höhe ist falsch :(

      Chris
      – Informationen zu den Bewertungsregeln

      Dem kannst du entgegenwirken, indem du das Elternelement ebenfalls aus dem Fluss nimmst. (...und natürlich die feste Höhenangabe entfernst.)

      Prima, so klappt das.
      Vielen Dank :)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln