2

I have 3 inline divs, with set width and height. They look great, then I add content inside one of the divs and all the sudden they don't line up any more in Chrome and Safari. (They also never line up in IE6 & 7 I would love to understand that as well.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>What is going on?</title>
        <style type="text/css">
            .actionBox
            {
                width: 295px;
                height: 215px;  
                margin: 0 5px 5px 0;
                display: inline-block;
                background-color: #BBB;
            }
        </style>
    </head>
    <body>
            <div class='actionBox'>
                *** TAKE THIS LIKE OF TEXT OUT AND THEY WILL ALL LINE UP AGAIN ***
            </div>
            <div class='actionBox'>
            </div>
            <div class='actionBox'>
            </div>
    </body>
</html>
Jeremy A. West
  • 2,162
  • 4
  • 27
  • 40

2 Answers2

5

You need to add vertical-align. The default is baseline which is causing the bottom of the text to line up with the baseline. Try top or bottom and it should work fine.

http://jsfiddle.net/aXesS/

In the fiddle, the first 3 are your code directly. Notice that the bottoms of the text in each box are lining up. The 2nd 3 are with vertical-align:top. Notice that they are all nicely lined up.

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • Wow, first I have seen the jsfiddle thing. Thats seems to work great.. Thank you. Do you have any quick fixes so that it would work in IE 6 & 7 as well? – Jeremy A. West Jan 06 '12 at 22:08
  • Change them to spans. IE6 (and maybe 7) will only allow `inline-block` on elements which are natively inline. – James Montagne Jan 06 '12 at 22:15
2

Did you try float:left; instead of display:inline-block; ?

Etienne Dupuis
  • 13,548
  • 6
  • 47
  • 58
  • I gave this a shot, but the page I am working with is a bit more complex than my example. I really want the divs to fill out the div they are contained in. – Jeremy A. West Jan 06 '12 at 22:09