Home/ Questions/Q 7741211
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T08:58:03+00:00

I am trying to achieve a layout where a sequence of divs are rendered

  • 0

I am trying to achieve a layout where a sequence of divs are rendered in one line with some of them left aligned and some of them right aligned.

<html>
    <body>
        <div width="100%">
            <div class="left">item1</div>
            <div class="left">item2</div>
            <div class="right">item3</div>
            <div class="right">item4</div>
        </div>
    </body>
</html>​
.left, .right
{
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.right
{
    float: right;
}

​

I have above code, and it renders the way i expect in ie8, firefox, chrome. But on ie7 the right floated divs are shown in the next line instead of same line

non-ie7 result
ie7 result

I have a jsFiddle at http://jsfiddle.net/acdara/MEDSy/27/

I know the other solution is to float the left aligned elements as well, but i really want to keep the benefits of inline-block like not having to worry about the elements out of the flow.

I want to know if there is something else I can do for ie7 to keep the inline-block goodness.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One solution is to flip the order of your markup so you’re floating the right elements first:

    <div class="right">item3</div>
<div class="right">item4</div>
<div class="left">item1</div>
<div class="left">item2</div>

    The reason it wasn’t working on IE7 is because inline-block doesn’t work on IE7 for items that aren’t inline by default (see the browser compatibility chart for inline-block) so your floating will exhibit the normal behavior for floats for block items – i.e. if items are floated left first, the right floated items will fall below them in the same way block items in sequence would without floats.

    • 0