Align divs that are inline blocks
Can anyone explain the behavior of divs here http://jsfiddle.net/Z7z5Q/ ? I wonder why they are not lined up? And why does adding text to a div move other divs?
Here is the 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;
}
Thank. Links to documents or articles will be appreciated.
source to share
The elements are aligned ... but not in the way you intended, obviously;)
The key to your problem is property .
Remove first to see the fields better.
Then add : problem solved ( see fiddle ) vertical-align
border-radius
vertical-align: middle;
Content or not, each box is now aligned relative to its fixed height (you set it to 100px).
What happened in the first place without vertical-align: middle;
? Change the value for baseline
: you revert to the original problem. This is the default that you need when displaying text in span
, for example, or the label and text of a text box, regardless of the padding and margins on both. But with text forced to span 2 or 3 lines (boxes are 100px wide regardless of their content), the baseline is very different from what you'd expect, it's baseline content, which is the last line of text.
It's the same with empty div
: since they lack content to reconcile, their baseline is their downside (not so sure about this, but that's what seems to happen).
Add one character or non-decomposable space in some blankdiv
: their baseline is now completely different from the empty div. See another violin
The same thing 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 going on. You don't have a single occurrence of "normal" text here, so defining it is a little more difficult.
Why float: left; works here? This will take each square, all the same height, and align it with the box, not its content. But then you have to control the clearing, and 1px more on the box can break the alignment of all the following margins ...
source to share
inline-block
is an attribute with a number of curiosities. In this example, you can clearly see that removing height: 100px
from the CSS rules div
will result in elements that have their own text aligned, which is not so obvious with bright round dotted colored borders. To fix this, you would apply vertical-align: top
. ( source )
The baseline of an "inline block" is the baseline value of its last string field in a normal stream if it has no lines in the stream or if its "overflow" property has a computed value other than "visible" ', in which case the baseline is bottom edge edge.
(from a great answer from another thread)
Compared to floats, it is aligned at the top by default.
source to share
Adding float:left;
will solve this problem, see here: http://jsfiddle.net/Z7z5Q/5/
An addendum is also being added vertical-align:top;
: http://jsfiddle.net/Z7z5Q/7/
This is because inline-block behaves strangely with spaces in html.
source to share