Question

I am trying to place two divs on the same line (preferably centered) inside a wrapper div. The code I have written works great in FF and IE10. Almost every version of IE <10 doesn’t like it. Can anybody help, thanks!

html:

<div id="home_wrapper">
    <div id="links_location" class="shadow">content</div>
    <div id="iframe_location" class="shadow">content</div>
</div>

css:

#home_wrapper {
    width: 100%;
    text-align: center;
    border: 1px solid blue;
    float:left;
}
#links_location, #iframe_location {
    display: inline-block;
    background-color:White;
    !important
}
#links_location {
    width:20%;
    height:400px;
    text-align:left;
    border: 1px solid red;
}
#iframe_location {
    height:400px;
    width:70%;
    border: 1px solid black;
}

jsfiddle JSFiddle

Answer 1

How about:

#links_location, #iframe_location
{
    background-color:White;
    float: left;
 }

Is it what you wanted? Updated jsfiddle

*Update*

Everything works fine for me in all IE versions if you place !important after white, like this background-color: White !important;. You screw up your css by placing it after semicolon 🙂