Behöver hjälp med divar

[Galgalid]

Hej! Har börjat koda på ett forum för att lära mig php, och för att friska upp mina css-skills. Iallafall, jag har 1 parent div, som innehåller flera divar. Detta för att jag enkelt vill kunna centrera innehållet på skärmen. En av mina child-divs(main för att vara exakt) ska visa information som kan variera i längd. Har redan gjort så att main-diven anpassar sig beroende på hur långt innehållet i den är, men hur gör jag för att parent-diven ska anpassa sin storlek till main-diven? I CSS alltså. En height på 900px fungerar inte, då det ser underligt ut ifall där är för mycket/för lite information. Så..hur gör jag? Har googlat, men inte lyckats hitta något av intresse.
Jag skulle kunna lägga in en scrollbar, och då vore problemet löst, men jag tycker att det är en frukstansvärt ful lösning..så det är inte aktuellt.

Kod: Markera allt

<div id="overall">
       <div id="header">
        </div>
        <div id="menu">
         </div>
         <div id="main">
         </div>
       
</div>

[Lars]

Kommer inte overall-diven att expandera automatiskt så att de andra får plats inuti om man inte sätter någon speciell storlek på den? Sådana här saker kan helt klart driva en till vansinne...

Andol tipsade mig om Firebug för ett tag sedan, den ska du installera om du inte redan har gjort det.

[Galgalid]

Det är det den inte gör. Spelar ingen roll om jag sätter den till height: auto;, eller ifall jag bara inte deklarar det alls. Den försvinner då.

Kod: Markera allt

div#overall {
        width:  900px;
        height: auto;  
        text-align: center;
        border: 1px solid blue;
        margin:0 auto;
}

[AntonPetts]

Lite svårt att säga utan att ha sett CSS:en, har du en float i main kanske?

[Galgalid]

Har en float i alla child-divar.

Kod: Markera allt

div#main {
        height: auto;
        width: 740px;
        background-color:white;
        float: right;
        margin-top:10px;
        margin-bottom:10px;
        padding-bottom: 20px;
        border:1px solid black;
}

[AntonPetts]

ok trodde nästan det, sätt en float i #overall så borde det fungera

[Galgalid]

Nu fungerar det dock med den olyckliga bieffekten att sidan inte blir centrerad. Vet du någon lösning på det?

Edit: Efter mer provande, så blir det som ovan med float:right och float:left , men med float:none blir det som i första inlägget.

[AntonPetts]

Nu fungerar det dock med den olyckliga bieffekten att sidan inte blir centrerad. Vet du någon lösning på det?

det enklaste sättet är nog att lägga till en ny div med margin: auto och en width runt dem tidigare:

Kod: Markera allt

#wrapper
margin-left: auto;
margin-right: auto;
width: 60%

[Galgalid]

Tackar Nu ska det nog ordna sig