Positioneringsprobleem CSS

[Verwijderd]

Ik ben met een website bezig, die er in grote lijnen zo uit moet komen te zien:



Ik wil geen tabellen gebruiken, enkel divjes. Alleen ik kom er niet uit. Ik heb menu 1, content en menu 2 een float: left gegeven om zo de blokken goed naast elkaar te krijgen. Het komt er dan als volgt uit te zien:



De elementen die een float: left hebben hangen in een contentwrap met een height van 100% en een background: #FFF. Met de bedoeling dat de contentwrap altijd mee schuift naar onderen met de elementen die er in hangen de witte achtergrond behoudend. Dit gebeurt dus niet, het lijkt alsof de contentwrap overruled wordt door de elementen met float: left, daarbij schiet de footer ook omhoog, en verdwijnt achter de elementen. Ik kan hier heel lang mee blijven pielen terwijl de oplossing waarschijnlijk erg simpel is.. hoop ik.

[Pkunk]

google eens op "faux columns"..
En waarschijnlijk lost een <br style="clear:both"/> voor je footer je probleem op. Maar dat moeilijk te zeggen zonder voorbeeld code

[ Voor 18% gewijzigd door Pkunk op 20-08-2008 10:47 ]

[Verwijderd]

Faux columns lijkt erop, even proberen.

Ik heb het in html zo opgebouwd...

<div id="contentwrap">

<div id="menu1"> </div>

<div id="content"> </div>

<div id="menu2"> </div>

</div>

<div id="footer"> </div>

Verder is de style voor de elementen in de contenwrap globaal zo opgebouwd:

height: 100%;
width: 200px;
float: left;

[ Voor 6% gewijzigd door Verwijderd op 20-08-2008 10:56 ]

[Pkunk]

Floats rekken hun parents niet mee. Als jij dus een div hebt met daarin alleen maar floats blijft die div gewoon 0 hoog. Een element met cleat:both lost dat het beste op. (Je kan ook bv. een overflow:hidden meegeven, maar dat werkt weer niet in ie6)
Kijk eens hier:
http://www.quirksmode.org/css/clearing.html
Als je dat een beetje aandachtig leest moet je er uit kunnen komen

[ Voor 20% gewijzigd door Pkunk op 20-08-2008 11:01 ]

[Bozozo]

Een 'clear-element' gebruiken is echt niet nodig hoor. Zoals al staat in de link die je zelf geeft is het beter om een overflow toe te kennen aan de container.

[crisp]

plus dat je hier sowieso al een footer hebt waar je eventueel nog een clear op kan zetten

[Pkunk]

Bozozo schreef op woensdag 20 augustus 2008 @ 11:18:
Een 'clear-element' gebruiken is echt niet nodig hoor. Zoals al staat in de link die je zelf geeft is het beter om een overflow toe te kennen aan de container.

Jawel, maar dan zit je toch weer met hasLayout gezever. Een clear:both element gewoon wat "safer" om mee te beginnen (imho ) , want misschien wil je wel helemaal geen width: 100% of height: 100%. En dan moet je weer uitzoeken wat allemaal nog meer hasLayout triggert als je uberhaupt al weet wat het is.

//edit: ik heb me bedacht. Als je dan toch een verse site gaat beginnen moet je het natuurlijk meteen goed doen. Dan maar wat extra moeite steken in hasLayout(-achige zaken)

[ Voor 13% gewijzigd door Pkunk op 20-08-2008 11:26 ]

[Verwijderd]

Ok, bedankt. Opgelost, het ziet eruit zoals ik het wilde hebben