Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Parent DIV 'groeit' niet mee met child DIV

None
3 antwoorden
  • Ik heb de volgende setup:
    Een container die de hele site bij elkaar en in het midden houdt: <div id="outline">
    Daarin wat blablabla tekst
    Daarin ook: een nieuwe container die de rest van de site bij elkaar houdt: <div id="main">
    En in deze 'main' div heb ik twee divs naast elkaar: een sidebar en een blok voor de entries.
    [img:cb00522e4e]http://www.gooly.net/images/divsetup.gif[/img:cb00522e4e]
    Nu zit ik met het volgende probleem
    'Main' streched niet mee wanneer de inhoud van zijn 'childeren' Sidebar en/of Entries groter wordt. Layout-technisch staat alle tekst wel op de juiste plaats, maar de children gaan beneden over de grens van hun parent, om het zo maar even te zeggen.
    En aangezien de achtergrond in 'Main' zit, is dat erg vervelend. De achtergrond beperkt zich nu namelijk tot een smalle streep bovenin, omdat main niet meegroeit. En de content (lees: tekst) hangt er onder aan.

    Het vreemde is dat wanneer ik tekst rechtstreeks in 'main' typ (dus buiten de sidebar en entries div), dan streched 'Main' wel. Maar zodra ik diezelfde tekst in zijn childeren 'sidebar' of 'entries' zet (dus ook in main, want daar zitten die beide div's in), dan Streched main niet.
    Overigens werkt het in IE wel prima, maar ik wil de boel toch ook wel graag werkend hebben in andere browsers als Firefox en Opera.
    Ongetwijfeld doe ik iets fout. Ik heb gemerkt dat het allemaal erg nauw komt met die Div's. Maar wat???
    [code:1:cb00522e4e]
    <html>
    <head>
    <title>De titel</title>
    <style type="text/css">
    <!–

    #outline {
    width: 760px;
    margin-right: auto;
    margin-left: auto;
    }

    #main {
    background-image: url(images/backgrmid.jpg);
    height: auto;
    width: 760px;
    background-repeat: repeat-y;
    }

    #sidebar {
    width: 190px;
    margin-top: 25px;
    margin-left: 20px;
    float: left;
    }

    #entries {
    width: 460px;
    margin-top: 0px;
    margin-left: 20px;
    float: left;
    }
    –>
    </style>
    </head>
    <body>
    <div id="outline">
    Blablabla
    <div id="main">
    <div id="sidebar">Dit is de sidebar</div>
    <div id="entries">Dit zijn de entries</div>
    </div> <!– end main div –>
    </div> <!– end outline div –>
    </body>
    </html>[/code:1:cb00522e4e]
  • De oplossing is denk ik iets dat je toevallig maar moet zijn tegengekomen… Gebruik overflow:hidden op containers die floatende elementen bevatten, dan groeit de container mee.
    www.quirksmode.org/css/clearing.html
  • Bedankt! It did the trick!

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.