Horizontally Aligning DIVs Within DIVs - IE Not Working

Question

Im having a bit of trouble trying to horizontally align 3 DIVs within a DIV (not the most complicated of tasks i know).

I have managed to get this working in FireFox, but for some reason, in IE, each DIV appears to show on a new line within the main DIV.

Example output in FF (as expected/required):

DIV1 DIV2 DIV3

Example output in IE:

DIV1

DIV2

DIV3

I've attached my fiddle here: http://jsfiddle.net/oampz/u6bWR/1/

Its odd that on my jsFiddle its appear fine in IE and FireFox, but in my application, using exactly the same code, i am facing the problem above.

HTML:

<div class="ctr-full">
<div class="wrap">
    <div class="grid-wrap">
        <div class="grid one-whole">
            <ul class="list">
                <li>
                    <div class="toggle_head toggleInputbackground" style="position: relative;">
                        <div class="one-fiftieths" style="display: inline-block; vertical-align: middle; padding-top:10px;">
                            <img src="/images/expand.png" border="0" alt="Expand" class="expand"></img>
                            <img src="/images/collapse.png" border="0" alt="Collapse" class="collapse"></img>
                        </div>
                        <div class="nineteen-twentieths" style="display: inline-block; vertical-align: middle; padding-top:10px;">
                            <label>Step 1 > Enter Details</label>
                        </div>
                        <div style="display: inline-block; vertical-align: middle; padding-top:10px;">
                            <label>?</label>
                        </div>
                    </div>
                    <div class="toggle_body">
                        <ul>
                            <li>
                                <label>text text text.</label>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>

CSS:

.toggleInputbackground {
    background: #B8B8B8;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #B8B8B8), color-stop(100%, #B8B8B8));
    background-image: -webkit-linear-gradient(#B8B8B8, #B8B8B8);
    background-image: -moz-linear-gradient(#B8B8B8, #B8B8B8);
    background-image: -o-linear-gradient(#B8B8B8, #B8B8B8);
    background-image: linear-gradient(#B8B8B8, #B8B8B8);
    color: #5C5C5C;
    height: 45px;
}
.nineteen-twentieths {
    width: 95%;
}
.one-fiftieths {
    width: 2%;
}
.one-whole {
    width: 100%;
}
.ctr-full {
    background: whitesmoke;
    padding: 12px 0;
    *zoom: 1;
}
.ctr-full:after {
    content:"";
    display: table;
    clear: both;
}
.wrap {
    width: 90%;
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1440px;
    *zoom: 1;
}
.wrap:after {
    content:"";
    display: table;
    clear: both;
}
.grid-wrap {
    margin-left: -24px;
    *zoom: 1;
}
.grid-wrap:after {
    content:"";
    display: table;
    clear: both;
}
.grid {
    float: left;
    padding-left: 24px;
}
.list li, .list dt, .list dd {
    padding: 4px 0;
}

jQuery:

//hide the all of the element with class msg_body
$(".toggle_body").hide();
$(".collapse").hide();

//OnClick of a header componenet, toggle the visibility of all images which are direct children of .toggle_head
$(".toggle_head").click(function () {
    //alert("You clicked");
    var $this = $(this);
    $this.next(".toggle_body").slideToggle("slow", function () {
        $this.children('img').toggle();
    });
});

I hope its something simple i've missed.

Thanks

Update (hardcoding widths:)

<div class="toggle_head toggleReportInputbackground one-whole" style="display: inline-block;">
<div style="display: inline-block; padding-top:10px; width:5%;">
    <img src="/images/expand.png" border="0" alt="Expand" class="expand"></img>
    <img src="/images/collapse.png" border="0" alt="Collapse" class="collapse"></img>
</div>
<div style="display: inline-block; padding-top:10px; width:80%;">
    <label class="boldText">Enter Details</label>   
</div>
<div style="display: inline-block; padding-top:10px; width:5%;">
    <label>?</label>
</div>
</div>

As you can see i've used widths 5%, 80% and 5% leave 10% spare.. I've also removed vertical-align: middle; from the 3 contents divs and position: relative; from the main/container div

I've dated my fiddle here: http://jsfiddle.net/oampz/u6bWR/2/

Again, it appears fine in FF.. IE is still displaying on new lines.

Answer 1

You defined width for first two divs (2% and 95% respectively) but not for the third one. It means that the third div has only 3% left. If its content (?) is wider than 3% of its parent then the div will break into new line. Also you should consider white-spaces which become a problem in inline-block layout. I'd suggest adding width: 3% to the third div and rewrite your HTML to remove white spaces:

<div class="toggle_head toggleInputbackground" style="position: relative;">
    <div class="one-fiftieths" style="display: inline-block; vertical-align: middle; padding-top:10px;">
        <img src="/images/expand.png" border="0" alt="Expand" class="expand"></img>
        <img src="/images/collapse.png" border="0" alt="Collapse" class="collapse"></img>
    </div><div class="nineteen-twentieths" style="display: inline-block; vertical-align: middle; padding-top:10px;">
        <label>Step 1 > Enter Details</label>
    </div><div style="display: inline-block; vertical-align: middle; padding-top:10px; width: 3%;">
        <label>?</label>
    </div>
</div>

Here's complete fiddle: http://jsfiddle.net/CjXQZ/1/

Answer 2

try giving float:left to all three DIV. This will probably fix your problem.