CSS float Problem

Fugo

Servus!

Kleines CSS Problem. Ich möchte für ein Layout ein <div> Element mit mehreren <div> Elementen füllen. Dabei soll sich das äußerste <div> Element an die Größe der inneren <div>s anpassen. Es soll sich also das äußerste <div> aufblähen.

Verwende ich nun aber die float formatierung für ein inneres <div>, dann "fällt" es quasi aus dem äußeren <div> heraus. Wie kann ich das umgehen? Hier ein Beispiel:

HTML

<div style="width:200px; border:1px solid black; background-color:#CCCCCC">
Inhalt Inhalt Inhalt
<div style="width:20px; height:500px; float:left; border:3px solid black"></div>
</div>

So... das "Inhalt"-<div> sollte für meine Zwecke jetzt 500px hoch sein, da sich das 500px hohe div ja innerhalb des Inhalt <div> befindet. Durch float:left ist das Inhalt <div> jetzt aber nur mehr so hoch wie der Text...

Ich hoffe, das ist verständlich.

thx4hints
Fugo

zwutschkerl

Code

position:absolute

also:

Code

<div style="width:200px; border:1px solid black; 
                background-color:#CCCCCC; position:absolute">
       Inhalt Inhalt Inhalt 
      <div style="width:20px; height:500px; float:left; border:3px solid black"></div> 
</div>

Fugo

Achja, das hab ich noch vergessen -> ich würd's gerne ohne position: absolute lösen Falls möglich...

navyseal

hoffe habs richtig verstanden .... lass einfach mal das float weg !
dann is der inhalt div umschließend ...

tonico

Kurzfassung: das Float-Div muss ge-cleared werden. Beispiel:

HTML:

HTML

<div id="a">
  <div id="b">
    Hello world!
  </div>
</div>

CSS:

Code

#a {
  background-color: #660000;
}
#b {
  color: white;
  background-color: #006666;
  width: 200px;
  height: 200px;
  float: left;
}
#a:after {
  clear: both;
  content: '.';
  display: block;
  height: 0;
  visibility: hidden;
}

Alles anzeigen

Details:
http://www.positioniseverything.net/easyclearing.html

Fugo

Danke für die Info! hat mir geholfen

zwutschkerl

Wieder was gelernt...

Fugo

Stimmt Ich glaub im Bereich css kann man nie auslernen... solang's Browser wie den IE gibt, erst recht net *g*

Was ich mich da schon herumgeärgert (naja, eigentlich freu' ich mich ja über die Herausforderung) hab... Wahnsinn.

Maximilian Rupp 27. Dezember 2024 um 12:05