Div side-by-side ie7 not using float

Question

I am attempting to get two divs to be side-by-side and in the center of a wrapper div. My current method is to align the wrapper contents to center, then display as an inline block. However, this does not work in IE7, which I must code for. I've added a JS fiddle with a simple example. Is there a way to accomplish this in IE7?

jsfiddle http://jsfiddle.net/QDn6T/

HTML

<div id="wrapper">
    <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div>
</div>

CSS

#wrapper{
    height:800px;
    text-align:center;
    background-color:orange
}

#div1{
    background-color:green;
    width:100px;
    display:inline-block;
}

#div2{
    background-color:blue;
    width:100px;
    display:inline-block;
}

My guess as to why it's not working is because you can't make a `div` inline-block in IE7. Try changing them to `span` tags. — Alex W, Jun 12 '14 at 14:22
Why "not using float" specifically? You haven't justified why that's not a viable answer - could something like this work? http://jsfiddle.net/x6LW8/ — Richard JP Le Guen, Jun 12 '14 at 14:24
@RichardJPLeGuen I was attempting to avoid having to use a wrapper with a fixed width. I could do it that way if necessary, but I was hoping there was another way. This small bit of code is a larger part of a master page, and page content will be diverse in width, so I'd have to calculate each page's content width (some are dynamic) to use the wrapper. The example I gave was just a simple example to avoid all the complicated template code. — steventnorris, Jun 12 '14 at 14:27
I would like to know what's with all the downvotes, as I can adjust the question to provide what is needed if necessary. — steventnorris, Jun 12 '14 at 14:29
@steventnorris It worked for me: http://jsfiddle.net/QDn6T/1/embedded/result/ — Alex W, Jun 12 '14 at 14:37
@AlexW Must have done something wrong. Spans seem to work. I also happened upon an IE7 hack for divs I'll post below. — steventnorris, Jun 12 '14 at 14:45

score 0 · Accepted Answer · edited May 23 '17 at 12:12

There is an IE7 hack that will allow for proper display of elements as if they are inline-block elements. The hack is added to css as below.

#div1{
    width:300px;
    display:inline-block;
    zoom:1;
    *display:inline;
}

The * allows for only IE to interpret the display:inline property. zoom:1 allows for the inline element to display with the width, by triggering hasLayout. Source below:

http://uncorkedstudios.com/blog/how-to-fix-the-ie7-and-inlineblock-css-bug

Div side-by-side ie7 not using float

1 Answers1