[CSS] Div blijft buiten container vallen

[Bjk]

Na anderhalf uur klojowen ben ik het helemaal zat. Ik wil 2 kolommen in 1 div (container) zetten. Dit ging normaal altijd prima. Maar na mijn vakantie lukt het niet meer. De divs gaan naast elkaar staan door float: left (wat moet) maar dan rekt #content_frame niet mee. En als ik bij #content_frame_rechts de float weg haal vallen beide buiten de container.
Ik kijk er dus als anderhalf uur overheen hopelijk zien jullie het licht wel.

Het werkt wel in IE 7, maar niet in Firefox.

Cascading Stylesheet:

#content_frame
{
    margin-left: 13px;
    width: 847px;
    border: 1px solid red;
}
    
    #content_frame_links
    {
        float: left;
        width: 497px;
        border: 1px solid yellow;
    }
    
        #shortnews
        {
            width: 475px;
            border-bottom: 1px dotted #FFF;
            text-align: left;
            background-color: #121212;
            height: 120px;
        }
    
    #content_frame_rechts
    {
        float: left;
        margin-left: 24px;
        width: 222px;
        border: 1px solid orange;
    }

De simpele HTML:

HTML:

<div id="content_frame">
    <div id="content_frame_links">
                
       <div id="shortnews">
       x
       </div>
                    
       <div id="shortnews">
       x
       </div>
                
    </div>
                
    <div id="content_frame_rechts">
        x3
    </div>
</div>

Voorbeeld: http://www.halflife-2.nl/live/test/test.html

[ Voor 7% gewijzigd door Bjk op 13-08-2007 20:04 ]

[crisp]

clear je floats, of zorg voor auto-clearing door #content_frame een overflow: auto of hidden te geven

overigens moeten id's uniek zijn in een document, ik zou van 'shortnews' dan ook een class maken.

[Bjk]

Ah das handig, de overflow: auto gebruikte ik normaal in combinatie met een height om scrollbars te krijgen. Wist niet dat deze methode ook prima werkt voor het oprekken van je DIV. Bedankt.