[CSS] Float werkt niet binnen wrapper

[borstel]

Ik zit nu al een tijdje te puzzelen maar kom er niet uit. Heb al verschillende dingen geprobeerd in m'n css, maar volgens mij heb ik hem nu redelijk clean.

Ik heb een DIV. Dit moet een soort van vierkant zijn gecentreerd op een pagina. Boven- en onderkant heb ik afgerond door een transparante PNG boven/onder te plaatsen. Rest van de DIV heeft een achtergrond plaatje, waar deze afrondingen dan overheen zitten.

Binnen deze DIV wil ik weer twee DIVs plaatsen. En deze naast elkaar zetten, float:right/left. Alleen nu komt het probleem. Wanneer de DIVs onder elkaar staan, schaalt de hele DIV mooi mee. Zet ik de float 'aan' dan staan de DIVs naast elkaar, maar buiten de wrapper.

Zie ik iets simpels over het hoofd, waarom dit niet lukt. Heb de html/css al een paar keer opnieuw opgemaakt, maar het wil maar niet lukken.

Wat mij tot nu toe gelukt is, staat hier online.

Hieronder twee plaatjes om het duidelijk te maken.

Wrapper ziet er goed uit, schaalt mee met de <p>. Maar staan niet naast elkaar.


Wel float, maar buiten de wrapper.


Iemand misschien een tip, kom er al de hele dag niet uit!

code:

#page {
    background: #ccc /* url(../images/bgpage.jpg) no-repeat 2px top */;
    width: 964px;
    height: auto;
    margin: 20px auto 20px auto;
}
#wrapper {
    width: 964px;
    background: transparent url(../images/bg.page.body.png) repeat-y;
}
#wrapper .header {
    display: block;
    height: 6px;
    width: 964px;
    background: transparent url(../images/bg.page.header.png) no-repeat;
}
#wrapper .footer {
    display: block;
    height: 6px;
    width: 964px;
    background: transparent url(../images/bg.page.footer.png) no-repeat;
}
#wrapper .content {
    width: 964px;
}
#wrapper .content .left {
    display: block;
    width: 600px;
    position: relative;
    /* float: left; */ /*  werkt niet */
}
#wrapper .content .right {
    display: block;
    width: 250px;
    position: relative;
    /* float: right; */ /*  werkt niet */
}
#page p {
    line-height: 18px;
    padding: 10px;
    text-align: justify;
}

[Tommasso]

als ik het goed heb begrepen heb je een div met daarin 2 divs die bijde floaten.

de parent div (wrapper) heeft geen height opgegeven en aangezien floatende divs 'geen hoogte opgeven' denkt de wrapper div dat hij 'leeg' is waardoor hij zo klein wordt.

div kan je oplossen door een extra div aan het einde van de wrapper te maken met CSS: clear: both; tag erbij

ik maak even een ranzig voorbeeld:

HTML:

<div id="wrapper">
 <div class="left" style="float: left;">
  tekst
 </div>
 <div class="right" style="float: right;">
  tekst
 </div>
 <div class="clear" style="clear: both;">
 </div>
</div>

[ Voor 26% gewijzigd door Tommasso op 12-05-2009 22:35 ]

[borstel]

Wow, haha! Vrij logisch inderdaad, als je het zo bekijkt. En ik zit de hele dag te klooien, en opnieuw alles te maken. Hij werkt!

code:

<div class="clear"></div>

[orf]

Een overflow:hidden op de parent werkt ook en scheelt je onnodige mark-up.

[robdejongNL]

Tommasso schreef op dinsdag 12 mei 2009 @ 22:33:
verhaal

echter zou je er ook voor kunnen kiezen om de wrapper een overflow: hidden te geven. Dan hoef je ook geen extra div te plaatsen:

HTML:

<div id="wrapper" style="overflow: hidden;">
 <div class="left" style="float: left;">
  tekst
 </div>
 <div class="right" style="float: right;">
  tekst
 </div>
</div>

[ Voor 0% gewijzigd door robdejongNL op 12-05-2009 22:44 . Reden: te laat, zie hierboven ]

[Tommasso]

orf schreef op dinsdag 12 mei 2009 @ 22:42:
Een overflow:hidden op de parent werkt ook en scheelt je onnodige mark-up.

die werkt idd volgens mij ook, maar zelf houd ik niet van het style element overflow, maar das persoonlijke voorkeur.

volgensmij zijn er zelfs nog meer varianten, maar die ken ik allemaal niet uit m'n kop

zelf zie ik niet echt een voordeel danwel nadeel in het gebruik van danwel clear danwel overflow, maar ik denk dat veel mensen dat niet met me eens zijn

[borstel]

Super bedankt allemaal. Het werkt beide, ik ben weer een stapje verder!

[ Voor 30% gewijzigd door borstel op 12-05-2009 23:01 . Reden: resultaat url toegevoegd ]