Få div-boksen til å vokse

[CPkake]

Sitter å lager en nettside der jeg har div-bokser inne i en annen divboks, men den ytre div-en blir ikke større når jeg setter inn andre div-bokser. Høyden er ikke satt i den ytre div-boksen, men dette skulle vel ikke være nødvendig heller? Jeg vil at den skal variere med med lengden på innholdet på de forskjellige sidene, noen som har råd å komme med?

 

Dette skjer riktignok bare i FF og ikke i IE eller Opera.

 

På forhånd takk

 

<div class="main2">

<div class="sidetittel"><h1>7684 Grisefarm og traktor</h1></div>

<div class="tekst">

Det er mye å gjøre for en grisebonde, blant annet trenger dyrene mat. Det er settingen i dette LEGOsettet, hvor både bonden og kona hans er i full gang med arbeidsoppgavene.<p>

Selve grisefarmen er ikke så vanskelig å bygge, men traktoren er en liten utfordring. Fullt overkommelig derimot og helt klart verdt byggingen. En må være klar over at det er noen små deler, spesielt til farmen, så ikke bygg for fort. Det som gjør settet spennende er traktoren, den drar opp karakteren til settet, både for byggingen og lekingen. Uten den ville settet ha vært nokså tamt. Grisene er helt klart søte i seg selv, men traktoren et fint tillegg som gjør leking lettere og øker følelsen av at man er på en gård. Traktoren er fin å se på, og gøy å kjøre med, spesielt med griser bakpå tilhengeren.

 

</div>

<div class="bilde">

<img src="../images/7684stor.jpg">

</div>

<div class="informasjonsboks">

 

</div>

<div class="karakter">

Bygging:</br>

<img src="../images/4.jpg">

</div>

<div class="karakter">

Leking:</br>

<img src="../images/3.jpg">

</div>

<div class="karakter">

Utstilling:</br>

<img src="../images/3.jpg">

</div>

</div>

 

body {

background-color: #dddddd;

color: #dddddd;

}

 

.main2{

background-color: #FFFFFF;

width:1000px;

padding-top: 0px; padding-left: 0px;

padding-right: 0px; padding-bottom: 0px;

}

 

.sidetittel{

background-color: #FFFFFF;

padding-top: 0px; padding-left: 25px;

padding-right: 0px; padding-bottom: 1px;

}

 

.tekst{

background-color: #FFFFFF;

width:500px;

float:left;

padding-top: 5px; padding-left: 25px;

padding-right: 50px; padding-bottom: 10px;

}

 

.bilde{

background-color: #FFFFFF;

width:300px;

float:left;

padding-top: 5px; padding-left: 0px;

padding-right: 125px; padding-bottom: 10px;

}

 

.informasjonsboks{

background-color: #FFFFFF;

width:300px;

height:234px;

float:right;

background-image: url("../images/informasjonsboks.jpg");

background-repeat: no-repeat;

padding-top: 5px; padding-left: 0px;

padding-right: 125px; padding-bottom: 10px;

}

 

.karakter{

background-color: #FFFFFF;

width:150px;

float:left;

padding-top: 0px; padding-left: 0px;

padding-right: 0px; padding-bottom: 0px;

}

 

Det er da main2 som ikke blir større, men som burde bli det...

Endret 17. juli 2010 av CPkake

[Bjonski]

Prøv å bruke "overflow: auto;" eller "overflow: hidden;" på .main2

[gommle]

Rask hack: Sleng inn <div style="clear:both;"></div> nederst i diven som ikke blir større. Det fins også andre metoder som ikke bruker HTML.