[css] rekken van parent div door 2 geneste divjes

[marty]

Ik ben bezig een design aan het uitwerken waarbij ik op een probleem gestuit ben.
globaal gaat het om het volgende:

Gecentreerd in het midden van de pagina bevindt zich een vierkant met variabele hoogte (bovenkant staat vast, onderkant niet) en met daarin ruwweg 2 kolommen. Het vierkant bevat om de gehele rand (behalve onder) een soort gradient die 'm netjes met de achtergrondkleur van de pagina blend. Doordat het vierkant een vaste breedte heeft heb ik dit in eerste instantie zo opgelost:

Cascading Stylesheet:

body {
    text-align: center;
}
#container {
    position: absolute;
    top: 50px;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    text-align: left;
}
#container_top {
    height: 15px;
    background-image: url(content_top.png);
    background-repeat: no-repeat;
    }
#container_body {
    background-image: url(content_bg.png);
    background-repeat: repeat-y;
    }

door het divje met id=container_body nu met content te vullen wordt precies het gewenste effect verkregen.

Echter, deze content bestaat dus uit twee kolommen.
Wat ik ook probeer, zodra ik deze twee kolommen naast elkaar positioneer, houden ze op ruimte in te nemen van #container_body, waardoor de hele achtergrond wegval.

Dit heb ik nog enigszins op kunnen lossen door die twee kolommen allebei van een achtergrondje te voorzien, maar dit lost het toch niet helemaal op doordat beide kolommen niet even lang zijn.

Ze worden overigens met dynamische data gevuld, vandaar dat ze geen vaste hoogte hebben.

Voor dat iemand faux kolommen gaat roepen, daar heb ik naar gekeken, maar dat biedt geen oplossing.

[Victor]

Heb je misschien een pagina online staan waar je probleem te zien valt? Want ik zie hier weinig kolommen naast elkaar gepositioneerd worden.

[marty]

Het staat lokaal en wordt dynamisch gegenereerd, maar heb even een voorbeeld online gezet:

http://www.excudo.net/got/test.html
http://www.excudo.net/got/test2.html

[Victor]

1) Centreer #container met margin: 50px auto 0; Haal heel het position verhaal dus weg. Geef 'm wel een overflow: hidden mee.

2) Geef #menu een float: left en haal wederom het position verhaal weg

3) Geef #content een margin-left: 210px en ook hier geen geposition.

[ Voor 5% gewijzigd door Victor op 09-03-2007 18:22 ]

[marty]

daar had ik al eens een variant van geprobeerd, maar dat verhelpt het probleem ook niet.
Zowiezo maakt het volgens mij niet uit dat de container absoluut gepositioneerd is. en vanwaar de overflow: hidden? (gewoon nieuwsgierig, ik weet wat die doet, maar vraag me af waarom die nodig is).

ik heb het overigens wel geprobeerd hoor:

Cascading Stylesheet:

body {
    background-color: #B9BCAC;
    text-align: center;
}
#container {
    margin: 50px auto 0;
    text-align: left;
    width: 800px;
    overflow: hidden;
}
#container_top {
    height: 15px;
    background-image: url(content_top.png);
    background-repeat: no-repeat;
}
#container_body {
    background-image: url(content_body.png);
    background-repeat: repeat-y;
}
#menu {
    float: left;
    width: 200px;
    padding-left: 10px;
    }
#content {
    float: left;
    width: 400px;
    }

Maar dat geeft hetzelfde effect.
En dat komt - volgens mij - omdat als je een element float, je 'm uit de normale flow haalt, waardoor hij daar geen ruimte meer inneemt. Met het probleem als resultaat.

[BasieP]

marty schreef op vrijdag 09 maart 2007 @ 18:49:

Maar dat geeft hetzelfde effect.
En dat komt - volgens mij - omdat als je een element float, je 'm uit de normale flow haalt, waardoor hij daar geen ruimte meer inneemt. Met het probleem als resultaat.

dat is onzin, floating elementen vallen nog steeds binnen containers, je moet alleen soms wel even de floating clearen (<br clear="all"> na laatste floating element).

waarom je OF display: absoluut OF overflow: hidden doet is mij volstrekt onduidelijk, je wilt dat iets meerekt, dus je wilt geen van die twee gebruiken in mijn ogen

ow en tussen twee haakjes:
een vierkant heeft vier gelijke vlakken. Een rechthoek niet. Jij hebt een rechthoek op je site, want hij is volgens jouw met een 'variabele hoogte'

[ Voor 26% gewijzigd door BasieP op 09-03-2007 18:56 ]

[Borizz]

Zoek eens op faux columns of column layout of zoiets dergelijks op GoT of op google en dan kom je al een heel eind denk ik. Aan dit artikel van alistapart.com heb je ook wel wat denk ik.

[marty]

BasieP schreef op vrijdag 09 maart 2007 @ 18:52:
[...]

dat is onzin, floating elementen vallen nog steeds binnen containers, je moet alleen soms wel even de floating clearen (<br clear="all"> na laatste floating element).

Ja, dat wel. Ze vallen inderdaad binnen de containers, maar nemen geen ruimte meer in van de container zelf, waardoor de container niet groter wordt dan een eventuele height of width die je gezet heb. In dit geval dus alleen een width en krijgt ie dus een hoogte van 0. En daar zit nou juist het probleem.

Borizz schreef op vrijdag 09 maart 2007 @ 19:00:
Zoek eens op faux columns of column layout of zoiets dergelijks

zucht ...

marty schreef op vrijdag 09 maart 2007 @ 17:24:
Voor dat iemand faux kolommen gaat roepen, daar heb ik naar gekeken, maar dat biedt geen oplossing.

[BasieP]

marty schreef op vrijdag 09 maart 2007 @ 19:06:
[...]


Ja, dat wel. Ze vallen inderdaad binnen de containers, maar nemen geen ruimte meer in van de container zelf, waardoor de container niet groter wordt dan een eventuele height of width die je gezet heb. In dit geval dus alleen een width en krijgt ie dus een hoogte van 0. En daar zit nou juist het probleem.

nu de rest van me post nog lezen

[marty]

ik ben er uit!

stom .. ik moet onder die floats gewoon nog een element zetten met clear: both!

en ik denk dat ik ook snap waarom King_Louie die overflow: hidden wilde .. maar hij gaf het voor het verkeerde element aan denk ik. ik zit me nu namelijk te bedenken dat floats gevaarlijk zijn met dynamische data .. als die een beetje te groot wordt per ongeluk, dan die eerste de tweede naar beneden drukken. Maar volgens mij kun je dat met een overflow: hidden tegengaan. dat ga ik nog ff proberen, want dat mag uiteraard niet gebeuren

[Victor]

marty schreef op vrijdag 09 maart 2007 @ 18:49:
daar had ik al eens een variant van geprobeerd, maar dat verhelpt het probleem ook niet.
Zowiezo maakt het volgens mij niet uit dat de container absoluut gepositioneerd is. en vanwaar de overflow: hidden? (gewoon nieuwsgierig, ik weet wat die doet, maar vraag me af waarom die nodig is).

ik heb het overigens wel geprobeerd hoor:

Cascading Stylesheet:

body {
    background-color: #B9BCAC;
    text-align: center;
}
#container {
    margin: 50px auto 0;
    text-align: left;
    width: 800px;
    overflow: hidden;
}
#container_top {
    height: 15px;
    background-image: url(content_top.png);
    background-repeat: no-repeat;
}
#container_body {
    background-image: url(content_body.png);
    background-repeat: repeat-y;
}
#menu {
    float: left;
    width: 200px;
    padding-left: 10px;
    }
#content {
    float: left;
    width: 400px;
    }

Maar dat geeft hetzelfde effect.
En dat komt - volgens mij - omdat als je een element float, je 'm uit de normale flow haalt, waardoor hij daar geen ruimte meer inneemt. Met het probleem als resultaat.

Door de container van een float een overflow: hidden te geven, clear je de float en rekt de container dus mee.

BasieP schreef op vrijdag 09 maart 2007 @ 18:52:
waarom je OF display: absoluut OF overflow: hidden doet is mij volstrekt onduidelijk, je wilt dat iets meerekt, dus je wilt geen van die twee gebruiken in mijn ogen

overflow is dus logisch, position: absolute moet je niet willen.

Borizz schreef op vrijdag 09 maart 2007 @ 19:00:
Zoek eens op faux columns of column layout of zoiets dergelijks op GoT of op google en dan kom je al een heel eind denk ik. Aan dit artikel van alistapart.com heb je ook wel wat denk ik.

Lees de TS eens.

[Borizz]

marty schreef op vrijdag 09 maart 2007 @ 19:06:

zucht ...

[...]

Zeker biedt dat wel een oplossing als je ze maar goed toepast binnen je container div... Je kan ook eens kijken naar de W3C specificatie van floats, die kan je misschien ook wel op weg helpen.
Je zal zowiezo met floats moeten werken i.p.v. met absoluut gepositioneerde elementen binnen je 'vierkant'. Anders ben je op Javascript aangewezen om je vierkant uit te rekken. Je moet er voor zorgen dat je je floats op de juiste plek 'cleart' dan wordt je parent element net zo hoog als je grootste child element.

[marty]

BasieP schreef op vrijdag 09 maart 2007 @ 19:09:
[...]
nu de rest van me post nog lezen

ah, sorry te snel gelezen .. nu zie ik het staan.
maar kennelijk heb ik het ergens in m'n onderbewuste toch meegenomen, want ik kwam plots ook tot die conclusie

je wordt er soms zo gaar van als je lang naar hetzelfde zit te staren

[Victor]

marty schreef op vrijdag 09 maart 2007 @ 19:11:
ik ben er uit!

stom .. ik moet onder die floats gewoon nog een element zetten met clear: both!

Nee, daar is die overflow: hidden op de container voor. Houd er rekening mee dat je in IE wel hasLayout nodig hebt op de container.

en ik denk dat ik ook snap waarom King_Louie die overflow: hidden wilde .. maar hij gaf het voor het verkeerde element aan denk ik. ik zit me nu namelijk te bedenken dat floats gevaarlijk zijn met dynamische data .. als die een beetje te groot wordt per ongeluk, dan die eerste de tweede naar beneden drukken. Maar volgens mij kun je dat met een overflow: hidden tegengaan. dat ga ik nog ff proberen, want dat mag uiteraard niet gebeuren

Ik zei het precies zoals ik het bedoel

[BasieP]

king louie, waar wil je heen dan met die overflow? die zorgt er voor dat de pagina niet mee sized als de content groter is dan de hoogte van het element namelijk (aangenomen dat de breedte vast is)

in dit geval wil de beste TS dit juist WEL!

[ Voor 153% gewijzigd door BasieP op 09-03-2007 19:15 ]

[marty]

King_Louie schreef op vrijdag 09 maart 2007 @ 19:11:
[...]

Door de container van een float een overflow: hidden te geven, clear je de float en rekt de container dus mee.

Die logica kan ik niet volgen ...
Grappige is dat het echter wel werkt .. maar alleen in firefox. In IE niet. Maar daar werkt het plaatsen van een extra element aan de onderkant met een clear: both gelukkig wel

Borizz schreef op vrijdag 09 maart 2007 @ 19:11:
[...]

Zeker biedt dat wel een oplossing als je ze maar goed toepast binnen je container div.

Het probleem is juist de achtergrond van de container div .. en dat is degene die bij faux kolommen uitkomst moet bieden. Dus ik zie echt niet hoe dat hier zou kunnen werken.
Maar geef maar eens een voorbeeld dan .. misschien zie ik wel iets over het hoofd.

King_Louie schreef op vrijdag 09 maart 2007 @ 19:12:
[...]

Nee, daar is die overflow: hidden op de container voor. Houd er rekening mee dat je in IE wel hasLayout nodig hebt op de container.

[...]

Ik zei het precies zoals ik het bedoel

Damn, wat typen jullie snel
hasLayout ken ik niet .. ga ik even opzoeken. En dit werkt ook in Safari? (opera zal ik zelf nog even testen)

BasieP schreef op vrijdag 09 maart 2007 @ 19:14:

Ja sorry dus BasieP ben nogal gaar en zie het nu in je post staan.

[Victor]

HTML:

<div id="container">
  <div id="left">blaat</div>
  <div id="right">woei</div>
</div>

Cascading Stylesheet:

#container {
  width: 800px;
  overflow: hidden;
}

#left,
#right {
  width: 50%;
  float: left;
}

De container schaalt nu mee met de geneste floats.

marty schreef op vrijdag 09 maart 2007 @ 19:20:
Die logica kan ik niet volgen ...

CSS en logica? Lolbroek

Grappige is dat het echter wel werkt .. maar alleen in firefox. In IE niet. Maar daar werkt het plaatsen van een extra element aan de onderkant met een clear: both gelukkig wel

Je moet voor IE in "standards mode" zitten, dus een DOCTYPE hebben. En bovendien moet je hasLayout triggeren, door bijvoorbeeld je container een vaste afmeting te geven.

hasLayout ken ik niet .. ga ik even opzoeken. En dit werkt ook in Safari? (opera zal ik zelf nog even testen)

hasLayout is een interne property in de Trident (IE) engine die gebruikt wordt om allerlei beslissingen te maken bij het renderen van de pagina. Veroorzaakt 9 van de 10 bugs die zich voordoen in IE.

[BasieP]

sorry dat ik het zo afkraak, maar het klinkt meer als een ranzige truuk dan een valide oplossing

[Victor]

BasieP schreef op vrijdag 09 maart 2007 @ 19:33:
sorry dat ik het zo afkraak, maar het klinkt meer als een ranzige truuk dan een valide oplossing

Prima kerel, gebruik <br style="clear: both" />

Daar gebruik je extra markup om een probleem op te lossen. Ik geef je een CSS-only, volledig cross-browser oplossing als alternatief. Doe er mee wat je wil.

[marty]

inderdaad... door bijv. de zoom op 1 te zetten wordt hasLayout true en werkt het in IE ook.
weer een truc geleerd

de overflow: hidden moet in mijn voorbeeld overigens niet op #container maar op #container_body

[Victor]

Het probleem met zoom is dat het een Microsoft geintje is dat ze aan CSS hebben toegevoegd. Je kunt beter gebruiken maken van valide properties.