CODEWITHSUNDEEP
htmlcssdisplay
Nick Martini
Nick Martini

Reputation: 5

display: inline-block not working correctly

I have two divs which I would like to have placed next to each other. This works when I give both divs the display: inline-block; property, but once I add a <p> tag into one of the divs the placement of that div goes out of whack. This is what i'm working with:

HTML:

<div class = "icon_container">
    <button><img src="images/favorite.png" class = "profile_icons"/></button><p>1234</p>
</div>
<div class = "icon_container">
    <button><img src="images/tool.png" class = "profile_icons"/></button>
</div>

CSS:

.icon_container {
    height: 150px;
    display: inline-block;
}

Fiddle:

https://jsfiddle.net/qLysghjf/

Upvotes: 0

Views: 8086

Answers (3)

Sikder
Sikder

Reputation: 29

Please add float:left in .icon_container css class. Hope this will work

Upvotes: 0

lhrec_106
lhrec_106

Reputation: 630

Well, according to this post by @robertnyman, to make inline-block element vertically align right, it needs vertical-align: top;. I had tried in your fiddle get the result as: https://jsfiddle.net/qLysghjf/3/

So the css is:

.icon_container {
  height: 100px;
  display: inline-block;
  background-color: red;
  vertical-align: top;
}

Upvotes: 3

Josh
Josh

Reputation: 403

Try adding a vertical align to your icon_container class:

.icon_container {
    height: 100px;
    display: inline-block;
    background-color: red;
    vertical-align: top;
}

https://jsfiddle.net/qLysghjf/2/

Upvotes: 3

Related Questions