html div IE 8 VS 2010 messed up

Question

The following html looks like how I want it in VS 2010 design view, but when I run it and it opens in IE 8 it's all jacked up. The blue and yellow are where I would expect, but the red is 1/2 way down from the blue, and the orange is at the very bottom left. What am I missing here?

<div style="background-color: Aqua; height: 195px; width: 800px;">

    <div style="background-color: Yellow; display: inline-block; width: 18%; height: 100%; margin: 0px 5px 0px 0px;">
        <!--Freq holder-->
        <fieldset style="height:85%;">
            <legend>Frequency</legend><br />
            <input type="radio" name="freq" value="Daily" />Daily<br /><br />
            <input type="radio" name="freq" value="Weekly" />Weekly<br /><br />
            <input type="radio" name="freq" value="Monthly" />Monthly
        </fieldset>
    </div>

    <div style="background-color: Red; display: inline-block; width: 32%; height: 100%; margin: 0px 5px 0px 0px;">
        Date holder
    </div>

    <div style="background-color: Orange; display: inline-block; width:48%; height: 100%;">
        Repeat holder
    </div>

</div>

Looks like I have to add float: left as well. For the love of god how an I supposed to know all these little quirks :( — user441521, Jul 29 '13 at 17:17
IE8 supports `inline-block` - [reference](http://caniuse.com/inline-block). Can you post all your code , or make a [JSFiddle](http://jsfiddle.net/)? — Vucko, Jul 29 '13 at 17:19
The above is all my code. The following answers my question and says I need both display: inline-block and float: left: http://stackoverflow.com/questions/9110646/ie8-display-inline-block-not-working — user441521, Jul 29 '13 at 17:26

score 1 · Accepted Answer · answered Jul 29 '13 at 17:41

Here's how to achieve it without using float or positioning:

All my child div have :

.inline{
    display:inline-block;
    vertical-align:top; /* to put the divs top */
}

With a font-size:0 to the parent container to remove the white space between divs.

JSFiddle

html div IE 8 VS 2010 messed up

1 Answers1