[CSS] floatende div laten meevergroten

[Verwijderd]

Mijn sitestructuur zit momenteel als volgt in elkaar:

HTML:

    <div id="app">
        <div id="header">title</div>
        <div id="side">
            <ul class="menu1">
                <li id="1">1</li>
                <li id="2">2</li>
                <li id="3h">3</li>
                <li id="4">4</li>
            </ul>
            <ul class="menu2">
                <li id="1">1</li>
                <li id="2">2</li>
                <li id="3">3</li>
                <li id="4">4</li>
            </ul>   
        </div>
        <div id="main">
            <div id="main1"></div>
            <div id="main2"></div>
        </div>
    </div>
    <div id="footer"></div>

Met de volgende css die relevant is:

Cascading Stylesheet:

#app {
    float: left;
    width: 100%;
    min-height: 100%; 
    _heigth: 100%;
    margin: -30px 0 0 0;
}

#header {
    width: 100%;
    height: 75px;
    padding: 30px 0 0 0;
    background: #666;
    color: #ffffff;
}

#side{
    float: left;
    width: 150px;
    background-color: Lime;
}

#side ul {
    list-style: none;
    margin-left: 1em;
    }

#side ul.menu1 {
 hier iets om te positioneren
}

#side ul.menu2 {
 //hier ook iets om te positioneren
}

#main {
    position: relative;
    margin: 0 0 0 150px;
}

#main1{
    height:250px;
    width:100%;
    background-color:green;
}

#main2{
    height: 200px;
    width:100%;
    background-color:blue;
}

Links staat dus een floatende div (side) waarin twee andere divs staan (menu1 en menu2). Menu1 en 2 zijn allebei unorded lists en deze wil ik een stuk naar beneden positioneren en dat de div (side) naar beneden toe gewoon groter wordt. Het probleem is echter dat mijn floatende div (side) niet groter wordt naar beneden, maar z'n grootte behoudt die logisch zou zijn als de divs op de plek van hun natural flow zouden blijven staan. Op welke manier ik menu1 en 2 ook verplaats, dat ding wil maar niet groter worden. Ook geprobeerd met een stukje onzichtbaar clear:both erna, maar dan verschuiven ook de andere div's op de pagina.
Iemand een idee hoe ik dat kan oplossen?

[MueR]

Ik volg je verhaal niet helemaal. Wil je niet een soort Faux column hebben? Ik weet iig wel dat je met diverse browsers problemen gaat krijgen omdat je puur numerieke IDs gebruikt (wat niet mag) en ze ook nog eens niet uniek houdt.

[Verwijderd]

Bedankt voor je antwoord. Numerieke id's worden niet gebruikt, heb ze alleen hier even in het voorbeeld gebruikt om wat overzichtelijker te zijn.

Nee, ik bedoel geen Faux column. M'n uitleg is inderdaad wat wazig.

De div 'side' heeft de eigenschap float: left;. Binnen deze div staan twee unorded lists die ik op een bepaalde plek in 'side' wil positioneren. Die twee lists pakken als parent in ieder geval niet de div 'side' heb ik het idee. Als ik ze bijvoorbeeld verplaats met position: absolute en dan een hoogte meegeef, wordt die hoogte vanaf helemaal bovenaan gemeten en niet vanaf het begin van de div 'side'.

In het linkerplaatje staat wat ik wil, in het rechter wat ik steeds krijg.

[Pkunk]

Verwijderd schreef op maandag 22 december 2008 @ 16:31:
Als ik ze bijvoorbeeld verplaats met position: absolute en dan een hoogte meegeef, wordt die hoogte vanaf helemaal bovenaan gemeten en niet vanaf het begin van de div 'side'.

Ik neem even aan dat je met hoogte top bedoelt en niet height. Als je een element wil positioneren t.o.v. van een ander element moet je er voor zorgen dat dat element ook een positie heeft. In dit geval kan je dus bv position: relative; meegeven aan side.

In het linkerplaatje staat wat ik wil, in het rechter wat ik steeds krijg.

[afbeelding]

Ik snap even niet precies wat je wil. Wil je het 2e menu uitlijnen met het 2e content blok? Of is het probleem dat de div side niet meerekt met z'n kindjes?

[disjfa]

Verwijderd schreef op maandag 22 december 2008 @ 16:31:
In het linkerplaatje staat wat ik wil, in het rechter wat ik steeds krijg.

MueR schreef op maandag 22 december 2008 @ 16:08:
Wil je niet een soort Faux column hebben?

Dat wil je wel

[Verwijderd]

disjfa schreef op maandag 22 december 2008 @ 17:11:
[...]


[...]


Dat wil je wel

Nee, toch niet. Uit het plaatje blijkt inderdaad dat de groene kolom even lang is als de gele kolom, maar dat is onbedoeld. De kolommen hoeven helemaal niet even lang te zijn, maar de groene kolom moet wel meerekken met de menu2.

side ziet er nu zo uit:

Cascading Stylesheet:

#side{
    float: left;
    position: relative;
    width: 150px;
    height: 100%;
    background-color: Lime;
}

Nu positioneer ik inderdaad wel ten opzichte van deze div, dat was een stom foutje. Side rekt echter nog steeds niet mee met een ander divje dat ik verder naar beneden plaats.

Wat ik ook heb geprobeerd, is het toevoegen van het volgende:

Cascading Stylesheet:

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

en deze toegevoegd aan <div id="side clearfix">. Dan gebeuren er echter nogal vreemde dingen. Hij pakt de css-styles voor de lists niet meer, die hebben dus opeens geen opmaak meer, en div 'main' verschuift naar beneden. Hoe dit uberhaupt kan, is mij ook een raadsel. Misschien iets fout in m'n syntax?

[ Voor 26% gewijzigd door Verwijderd op 22-12-2008 17:49 ]

[Pkunk]

Verwijderd schreef op maandag 22 december 2008 @ 17:36:
[...]


Nee, toch niet. Uit het plaatje blijkt inderdaad dat de groene kolom even lang is als de gele kolom, maar dat is onbedoeld. De kolommen hoeven helemaal niet even lang te zijn, maar de groene kolom moet wel meerekken met de menu2.

side ziet er nu zo uit:

Cascading Stylesheet:

#side{
    float: left;
    position: relative;
    width: 150px;
    height: 100%;
    background-color: Lime;
}

Nu positioneer ik inderdaad wel ten opzichte van deze div, dat was een stom foutje. Side rekt echter nog steeds niet mee met een ander divje dat ik verder naar beneden plaats.

En hoe plaats je dat divje dan?

[Verwijderd]

Positioneren van menu1 en menu2 op verschillende manieren geprobeerd, bijvoorbeeld:

Cascading Stylesheet:

#side ul.menu2 {
    position: absolute;
    top: 350px;
}

Of met float:left; er nog bij.
Of

Cascading Stylesheet:

#side ul.menu2 {
    position: relative;
    top: 350px;
}

[Pkunk]

Verwijderd schreef op maandag 22 december 2008 @ 18:01:
Positioneren van menu1 en menu2 op verschillende manieren geprobeerd, bijvoorbeeld:

Cascading Stylesheet:

#side ul.menu2 {
    position: absolute;
    top: 350px;
}

Of met float:left; er nog bij.
Of

Cascading Stylesheet:

#side ul.menu2 {
    position: relative;
    top: 350px;
}

Elementen met position:absolute zijn uit de flow van het document gehaald en rekken daardoor hun parent niet mee. Met position:absolute gaat je dat dus nooit lukken. position:relative positioneert zichtzelf t.o.v. waar het element oorsprokelijk zo komen. De werking lijkt hierdoor heel erg op margin.

Als je elementen gaat floaten willen ze ook wel eens hun ouders niet mee rekken. Er zijn een hoop manieren om dit tegen te gaan waaronder de oplossing met :after die je hierboven hebt gebruikt. Zelf gooi ik altijd een overflow:hidden op het parent element. Dit zorgt er ook voor dat hij netje meerekt.

Overigens snap ik niet waarom het bij jou misgaat, want ik heb even je html/css gecopy-paste en dat werkt allemaal prima. Ik heb het even online gezet:
http://home.planet.nl/~logte151/klad.html

Voor zover ik kan zien werk het prima met firefox/ie7/chrome

[Verwijderd]

Timlog schreef op maandag 22 december 2008 @ 18:10:
[...]

Overigens snap ik niet waarom het bij jou misgaat, want ik heb even je html/css gecopy-paste en dat werkt allemaal prima. Ik heb het even online gezet:
http://home.planet.nl/~logte151/klad.html

Bedankt voor het meedenken!

Als je nu in dat bestand het volgende toevoegt aan #side ul.menu2, dan zie je mijn probleem:

Cascading Stylesheet:

        position: relative;
        top: 345px;

[mcDavid]

Verwijderd schreef op maandag 22 december 2008 @ 18:35:
[...]


Bedankt voor het meedenken!

Als je nu in dat bestand het volgende toevoegt aan #side ul.menu2, dan zie je mijn probleem:

Cascading Stylesheet:

        position: relative;
        top: 345px;

als je dat nou gewoon met margin-top:345px; doet, heb je uberhaupt geen probleem.

[Verwijderd]

Interessante optie. Dat werkt inderdaad wel, relaxt! Er komen echter later nog meer dingen tussen menu1 en menu2 en is dat dan nog een nette oplossing?
Volgens mij moet het namelijk wel gewoon kunnen wat ik wil, ben dus toch nog wel benieuwd naar de oplossing

[Pkunk]

Verwijderd schreef op maandag 22 december 2008 @ 19:29:
Interessante optie. Dat werkt inderdaad wel, relaxt! Er komen echter later nog meer dingen tussen menu1 en menu2 en is dat dan nog een nette oplossing?
Volgens mij moet het namelijk wel gewoon kunnen wat ik wil, ben dus toch nog wel benieuwd naar de oplossing

Dit is toch wat je wil?

[dB90]

Dit werkt dan toch prima?

Cascading Stylesheet:

#side{
    float: left;
    width: 150px;
    background-color: Lime;
}

#side ul {
    list-style: none;
    margin-left: 1em;
}

#side ul.menu1 {
    float:left;
    width:100%;
}

#side ul.menu2 {
    float:left;
    width:100%;
}

Waarom dat gedoe met position:relative; & top:345px; enzo?

[mcDavid]

Verwijderd schreef op maandag 22 december 2008 @ 19:29:
Interessante optie. Dat werkt inderdaad wel, relaxt! Er komen echter later nog meer dingen tussen menu1 en menu2 en is dat dan nog een nette oplossing?
Volgens mij moet het namelijk wel gewoon kunnen wat ik wil, ben dus toch nog wel benieuwd naar de oplossing

Dan zou ik díé items absoluut positioneren, en niet het menu zelf.

Je wilt dan immers dat je float geen rekening houdt met die andere dingen die er tussen komen. En hoe deden we dat? Juist position:absolute; op de desbetreffende elementen. Niet andersom.

[daniëlpunt]

Overigens mogen class en id-namen niet beginnen met een cijfer

[Zoefff]

De oplossing is volgens mij veel simpeler. Een simpele "overflow: auto;" of "overflow: hidden;" op div#side zou moeten voldoen. Het blokelement wordt dan, ondanks dat er alleen floatende elementen in staan, netjes opgerekt door de elementen die er in staan.

[mcDavid]

Zoefff schreef op zondag 28 december 2008 @ 19:59:
De oplossing is volgens mij veel simpeler. Een simpele "overflow: auto;" of "overflow: hidden;" op div#side zou moeten voldoen. Het blokelement wordt dan, ondanks dat er alleen floatende elementen in staan, netjes opgerekt door de elementen die er in staan.

Wel als het gefloate elementen zijn, maar niet als ze met position:absolute gepositioneerd zijn. Dan verdwijnen ze écht compleet uit de float.