Align div that are inline-block

Question

Can anyone explain the behaviour of the divs here http://jsfiddle.net/Z7z5Q/ ? I wonder, why they are not aligned on one line ? And why adding text to div moves other divs ?

Here is html and css:

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
        <!--Add your HTML below!-->
        <div class="friend">Some text in more than two line, actually in 3</div>
        <div class="family">Some text in two line</div>
        <div class="friend" id="best_friend"></div>
        <div class="enemy" id="archnemesis"></div>
        <div class="friend">Some text</div>
        <div class="family"></div>
        <div class="friend"></div>
        <div class="family"></div>

    </body>
</html>

Css:

div {
    display: inline-block;
    margin-left: 5px;
    height:100px;
    width:100px;
    border-radius: 100%;
    border: 2px solid black;
}

.friend {
   border: 2px dashed #008000;  
}

.family {
    border: 2px dashed #0000FF;
}

.enemy {
    border: 2px dashed #FF0000;
}

#best_friend {
    border:4px solid #00C957;
}
#archnemesis {
    border: 4px solid #CC0000;
}

Thanks. Will appreciate links to docs or articles.

My reaction to the fiddle was 'HOLY F...' I did not expect that haha — martriay, Feb 19 '13 at 18:56

score 4 · Accepted Answer · answered Feb 19 '13 at 19:24

The elements are aligned... but not in the way you intended it, obviously ;)

The key to your problem is the property vertical-align.
First remove border-radius in order to better see the boxes.
Then add vertical-align: middle;: problem solved (see fiddle)

Content or not, each box is now aligned relatively to its fixed height (you fixed it to 100px).

What happened in the first place without vertical-align: middle;? Change the value for baseline: you're back to the original problem. This is the default value, the one you do want when displaying text in spans for example or a label and the text of a text field, whatever the padding and margin on both. But with text forced to occupy 2 or 3 lines (boxes are 100px wide whatever their content), the baseline is very different from what you'd expect, it's the baseline of the content aka the last line of text.
Same with empty div: as they lack content to align with, their baseline is their bottom side (not so sure about this one, but that's what seems to happen).
Add a single character or a non-breakable space in some empty div: their baseline is now completely different from an empty div. See other fiddle

The same phenomenon happens with a tall image lost in a paragraph of text; you can align it with vertical-align but the difference is that it's easier to see what's happening. Here you haven't a single occurence of "normal" text so spotting it is a bit harder.

Why float: left; does work here? It'll take each box, all of the same height, and align it relative to the box, not to its content. But then you've to manage clearing and 1px more on a box can break the alignment of all the following boxes...

score 2 · Answer 2 · edited May 23 '17 at 10:24

inline-block is an attribute with a number of curiosities. In this example, you can plainly see that removing height: 100px from the div CSS rules will result in the elements having their text aligned, which isn't so obvious with the flashy circle-shaped dashed multicolored borders. So to fix this, you would apply vertical-align: top. (source)

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

(from a great answer from another thread)

In comparison, floats align at the top by default.

score 1 · Answer 3 · answered Feb 19 '13 at 19:10

1

align on one line

div {vertical-align: middle;}

answered Feb 19 '13 at 19:10

Jack

172
8

@PerfectDark: The issue with white-space seems like a strong argument in favor of using floats rather than inline-block (making the code easier to maintain). – Matt Coughlin Feb 19 '13 at 19:39

score 1 · Answer 4 · answered Feb 19 '13 at 19:40

1

Adding a float:left; will solve this problem see here: http://jsfiddle.net/Z7z5Q/5/

Also adding vertical-align:top; will solve it as well: http://jsfiddle.net/Z7z5Q/7/

This is because inline-block behaves weird with white spaces in html.

answered Feb 19 '13 at 19:40

Kyle Needham

3,379
2
24
38

Align div that are inline-block

4 Answers4