Power By 专否社区

right-align an inline-block element in ie7

Go To StackoverFlow.com

1

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.

2012-04-04 21:28
by Schu
try to put a DOCTYPE in your page - David Bélanger 2012-04-04 21:38
What about just putting the content you want right aligned first in your markup? Then your floated elements should line up the way you want - kinakuta 2012-04-04 21:45
nope, DOCTYPE doesnt help, I already had it in my real app, now updated the fiddle as well - Schu 2012-04-04 22:53
@kinakuta - can you elaborate? i dont know how to right align controls on the same line without floatin - Schu 2012-04-04 22:54
You would still float, you just put the content you want to align right first in your markup: http://jsfiddle.net/MEDSy/28 - kinakuta 2012-04-04 23:16
@kinakuta - flipping the order seems to the trick, it definitely works on the fiddle, i will apply it my real app and verify, dont see a reason why it wouldnt work though. Can you post this as an answer? Do you know why this is fixing the problem? - known issue or by design - Schu 2012-04-04 23:22

2

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.

2012-04-04 23:46
by kinakuta

0

I got it work in all with this

<html>
    <head>
        <style>

.right
{
    float: right;
}
.left
{
    float: left;
}

        </style>
    </head>
    <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>

​check it: http://jsfiddle.net/Zgz9G/2/

2012-04-04 21:56
by johnnE
i already mentioned this as known solution, but its much better(in my real application) to have inline-block for left aligned elements instead of floating the - Schu 2012-04-04 22:46
Ads