(CSS)Div met variabele lengte in Div

[MaartenPol]

Ik probeer dit al een poosje op te lossen, maar ik kom er niet uit.

Wat is de situatie:

Ik heb een DIV die gecentreerd staat in het midden van de pagina. Deze heeft een breedte en lengte meegekregen. Binnen deze div staat een andere div, met de werkelijke inhoud van de pagina. Meestal gaat het goed, want dan is de inhoud van de tekst niet zo heel lang. Wordt de tekst toch wat lang gaat de 2e DIV buiten de eerst lopen en ziet het er allemaal niet meer uit. Hier de code van de pagina:

Cascading Stylesheet:

div.Table_01 {
    margin: 0px auto 20px auto;
    background-color:#FFFFFF;
    border:solid #000000 1px;
    position:relative;
    width:760px;
    height:740px;
}

div.main {
    position:absolute;
    left:150px;
    top:165px;
    width:600px;
    height:530px;
}

HTML:

<div class="Table_01">
    <div class="main">Teksten...</div>
</div>

Ik loop nu al een poosje te kloten met verschillende position opties, maar beter wordt het er niet van. Is het mogelijk wat ik wil, of moet ik toch een andere oplossing vinden?

[ Voor 1% gewijzigd door MaartenPol op 10-05-2007 21:09 . Reden: typfoutje ]

[tweakraiser]

Onnodig gebruik van positionering (en al helemaal absolute) veroorzaakt vaak ellende. Dus gebruik het alleen als je weet wat je doet.
.

Cascading Stylesheet:

div.Table_01 { 
    margin: 0px auto 20px auto; 
    background-color:#FFFFFF; 
    border:solid #000000 1px; 
    width:760px; 
    min-height:740px;

} 

div.main {
    margin-left:150px;
    margin-top:165px;
}

edit:margin

[ Voor 255% gewijzigd door tweakraiser op 10-05-2007 22:57 ]

[Rowanov]

Even een korte uitleg: je hebt een flow binnen je opmaak. Makkelijk gezegd betekent dat dat elementen elkaar wegduwen en uitrekken als ze genest staan. Als je ergens position: absolute; aan geeft, dan zet je dat element in een laag boven de andere elementen (uit de flow), waardoor ze elkaar niet meer weg kunnen drukken.

Het gaat overigens niet werken om alles op absolute te knallen, want dan ziet niets elkaar

[ Voor 17% gewijzigd door Rowanov op 10-05-2007 22:09 ]

[MaartenPol]

Als ik dat doe zoals je suggereert, krijg ik die 2e DIV niet die 150 pixels vanaf de rand van de eerste DIV. Hij gaat direct aan de rand staan vanaf de eerste.

Rowanov schreef op donderdag 10 mei 2007 @ 22:07:
Even een korte uitleg: je hebt een flow binnen je opmaak. Makkelijk gezegd betekent dat dat elementen elkaar wegduwen en uitrekken als ze genest staan. Als je ergens position: absolute; aan geeft, dan zet je dat element in een laag boven de andere elementen (uit de flow), waardoor ze elkaar niet meer weg kunnen drukken.

Het gaat overigens niet werken om alles op absolute te knallen, want dan ziet niets elkaar

Dit verklaart een hoop, hij liep inderdaad over de rand van de onderliggende heen.

[ Voor 66% gewijzigd door MaartenPol op 10-05-2007 22:24 ]

[tweakraiser]

Klopt, was margin vergeten... zie edit.
Voor de rest is het nogal basic, doe eens een goede ccs tutorial ofzo, en neem google als uitgangspunt.

[ Voor 59% gewijzigd door tweakraiser op 10-05-2007 22:35 ]