Home/ Questions/Q 7056649
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:53:32+00:00

I have 3 inline divs, with set width and height. They look great, then

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0