css floating and iexplorer

Question

i have two divs, that float correctly in chrome, ff and safari but not iexplorer, the right div appears below the left div floated to the right- the two divs are wrapped by an outer div with a width of 800px;

<div class="b_left">

</div>

<div class="b_right">

</div>

.b_left{
        width:350px;
        margin-left:80px;
        float:left;
        display: block;
    }

    .b_right{
        float:right;
        width:350px;
        height:280px;
        background-color:#c8c8c8;
        display: block;

    }

Answer 1

when using divs for columns, which I assume is what you are intending for this, it is better to only float one of the divs.

Say i have a div called content which is 600px wide and inside it two 300px divs inside, leftblock and rightblock. Instead of floating leftblock left and rightblock right I instead float the leftblock left and put a 300px margin-left on the rightblock. This pushes the rightblock to the right and ensures room for the leftblock to fit in beside it while preventing IE from displaying weirdly.

Hope this helps

Answer 2

I created a quick jsFiddle here: http://jsfiddle.net/6JWq9/

And it shows up just fine. I suspect you have other code that adds padding or a margin. Review my example, let me know what is different from yours and I can update my answer.

Answer 3

it is a bug of ie, it doubles the margins. you must add display inline to the .b_left.

display: inline

Answer 4

Just put margin: 0; padding: 0; on all three divs and go from there to check. Also reset styles are a MUST for IE, I use Eric Meyer's. (easy to Google).

Also, display: inline; on the one with margin will fix it for IE6 I suspect.