[CSS] Uitlijning/positie nested divs

[IntToStr]

As usual doet internet explorer weer eens vreemd met css.

Ik wil binnen een div 2 divjes naast elkaar hebben staan. Klinkt (en is) nog heel eenvoudig.
Nu is het de bedoeling dat de tekst in het rechterdivje gewoon fatsoenlijk wordt uitgelijnd.

Het linkerdivje is meestal kleiner (in hoogte) dan de rechter. Hierdoor krijgt de tekst in de rechterdiv in IE een extra spatie voor de tekst over de hele hoogte van de linkerdiv. Vanaf waar de linkerdiv stopt en de rechterdiv dus nog wel tekst bevat wordt het wel goed uitgelijnd.

Firefox doet het gewoon wel goed zoals ik het verwacht.

Misschien een beetje een vaag verhaal, ik vond het nogal lastig om een goede omschrijving te geven of zoektermen hierbij te bedenken.

Hier maar even een specifiek stukje html + css:

code:

<div id="outer">
    <div id="inner1">
        Hoi<br />
        Hoi
    </div>
    <div id="inner2">
        Dag<br />
        Dag<br />
        Dag<br />
        Dag
    </div>
</div>

code:

#outer {
    width: 80%;
    border: 1px solid black;
}
#inner1 {
    width: 20%;
    float: left;
    padding: 3px;
}
#inner2 {
    border-left: 1px dotted black;
    padding: 3px;
    margin-left: 22%;
}

Ik heb al wat geprobeerd met die paddings en de margins. Ook met alle paddings, margins en borders standaard op 0px. Helaas blijft IE moeilijk doen.

Misschien dat hier iemand iets weet waardoor de tekst netjes onder elkaar komt te staan in IE?
Hopelijk is het een standaard bug in IE waar ik nog niet eerder mee in aanraking ben gekomen die hier wel bekend is

[Verwijderd]

Heb paar dingen omgedraaid. Het lijkt hier nu te werken in IE en FF.

code:

#outer {
    width: 80%;
    border: 1px solid black;
    display: table;
}
#inner1 {
    float: left;
    padding: 3px;
}
#inner2 {
    float: right;
    width: 80%;
    border-left: 1px dotted black;
    padding: 3px;
}

Zoiets?

[IntToStr]

Het werkt inderdaad

Thnx!

Blijft leuk dat css met microsoft.

[crisp]

Het is overigens de beruchte 3-pixel bug