Hur får jag DIV att bli så lång som innehållet är?

5 svar · 329 visningar · startad av lillebror 15 jan. 2006

lillebrorMedlem sedan apr. 20041 597 inlägg

Frågan15 jan. 2006 20:51#1

Hej,

Har en sidstruktur som grovt sett ser ut på detta sätt:

<div id="content" style="height: 2000px; background-color: #EDEDED/*#E8E8E8*/;">
     <div id="content_two_columns" style="height: auto; padding-top: 10px; 
          <div style="float: left;">
          INNEHÅLL
          </div>
         
          <div style="float: right;">
          INNEHÅLL
          </div>
      </div>
</div>

Nu vill jag att höjden på #content skall anpassa sig helt så att den slutar efter innehållet är slut i diven med float: right;. Eftersom jag har lagt en bakgrundsfärg i #content är det viktigt att den sträcker ut sig hela vägen ner till footern för att färgen skall täcka. I nuläget så gör den ej det.

Om man tittar på http://www.flygfyren.nu/index.php så ser man det rätt bra att den slutar även fast innehållet inte är slut. Jag har fattat det som att #content hänger med och blir större beroende på innehållet som ligger i den men det kanske är fel tänkt av mig?! :OO

Nu har jag lagt på en mörkare bakgrundsfärg för att det ska vara lättare att se var gränsen går för #content-diven. Den skall egentligen vara ljusare.

SimOnlineMedlem sedan juli 20031 132 inlägg

15 jan. 2006 21:20#2

En liten gissning bara, pröva att byta ut "height: 2000px;" mot "clear: both;", eller eventuellt ta bort "height: 2000px;" och sätta in "clear: both;" i den vänstra kolumnens css.

lillebrorMedlem sedan apr. 20041 597 inlägg

15 jan. 2006 21:30#3

height satte jag till 100 % i left-diven plust att jag lade in clear: both.

får dock fortfarande samma resultat enligt bilden...

PalleMedlem sedan apr. 20003 174 inlägg

16 jan. 2006 07:44#4

<div id="content" style="background-color: #EDEDED/*#E8E8E8*/;">
     <div id="content_two_columns" style="padding-top: 10px; 

          <div style="float: left;">
          INNEHÅLL
          </div>
         
          <div style="float: right;">
          INNEHÅLL
          </div>
          
          <!-- Här sätter du CLEAR -->
          <br style="clear:both;" /> 
          
      </div>
</div>

lillebrorMedlem sedan apr. 20041 597 inlägg

16 jan. 2006 14:27#5

Har lagt till

<br style="clear:both;" />

Jag får fortfarande samma resultat. Jag tog bort alla height-attributer på divarna också men det gjorde tydligen ingen skillnad.

lillebrorMedlem sedan apr. 20041 597 inlägg

16 jan. 2006 14:28#6

Kollade precis i IE och då verkar det fungera så när som på en vit sektion i toppen och botten av sidan...

Får jag det inte att fungera tillfredställande i både FF och IE så får jag skrota idén :)

Tyckte det var snyggt med lite gråare bakgrund just på första sidan istället för att det ska bli så vitt överallt.