CSS probleem 2 divs naast elkaar met text/img erin

[aex351]

Ik heb een probleem waar ik niet uitkom, got search evenals google leveren geen resultaten op die mijn vraag hebben kunnen beantwoorden.

Dit onderstaand stuk code zou 2 divs die naast elkaar staan moeten opleveren, dit doen ze ook alleen er zijn 2 problemen.

Probleem 1 , de 2 divs die naast elkaar staan zitten in firefox niet meer in <div class="midden-rechts_inhoud_blok">

Probleem 2 , beide divs indien breeder dan ingesteld rekken niet naar beneden, zie ook aaaaaa

HTML:

          <div class="midden-rechts_inhoud_blok">
                <div style="width:300px; display:inline; float:left ; vertical-align:top;">
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa
                </div>
                <div style="width:200px; display:inline;float:left ; vertical-align:top;">
                     bbbbbbbbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbb
                </div>
            </div>

Cascading Stylesheet:

div.midden-rechts_inhoud_blok {
    width:510px;
    border: 1px dashed #CCCCCC;
}

[equationunequal]

Zet deze div eens onder die twee divs in je "midden-rechts_inhoud_blok" (lekker naamgeving ):

HTML:

<div id="clear">
    &nbsp;
</div>

Met dit in je css:

Cascading Stylesheet:

#clear {
    clear : both;
}

Hoe wil je dat de divs precies rekken Ze hebben namelijk geen relatie met elkaar en zullen dus niet meerekken als de content van de andere div langer wordt (het zijn geen table-cellen). Om dat op te lossen kan je gebruik maken van zgn. "faux columns", zie search...

_{post eens een linkje, we kunnen zo moeilijk zien wat het probleem is en wat het precies veroorzaakt...}