Question

Basically I have a set of divs that are pretty much identical in structure, then following them I have a div that is unique to the set. Basically the first divs are a bunch of different categories and the last div is a userprofile type square. What I can’t figure out is why the user profile square is being rendered with a higher position than the other divs.

they all have the same css

  cursor: pointer;
  display: inline-block;
  margin: 10px;
  padding: 5px 5px 10px 5px;
  width: 219px;
  height: 219px;
  background: #fff;

and the container has this css

display: block;
float: left;
width: 100%;
text-align: center;
padding: 15px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;

this is what it looks like

I’m guessing it’s because the divs internal structure is different, but I’m not sure why it’s doing this. I also noticed that if for example one of the category divs’ images do not load it behaves the same way as my rogue div.

Any light there is to be shed on this issue is much appreciated.

Answer 1

With display: inline-block; it’s best to always add vertical-align: top; to the children (and then format from there as needed), especially if you have different element types or images in your container. Even images inside of your child elements can mess up the layout of inline-block;. inline-block elements also suffer from the “whitespace problem”, which can affect layout. To prevent that you can either put all child elements together or comment out the whitespace.

Demo: http://jsfiddle.net/ThinkingStiff/wwwkJ/

HTML:

<div id="container">
    <div class="child">one</div>
    <div class="child">two</div>
    <img class="child" />
</div>

<div id="container-align">
    <div class="child-align">one</div>
    <div class="child-align">two</div>
    <img class="child-align" />
</div>

<div id="container-align-whitespace">
       <div class="child-align">one</div><!--
    --><div class="child-align">two</div><!--
    --><img class="child-align" />
</div>

CSS:

.child {
    border: 1px solid red;
    display: inline-block;
    height: 50px;
    width: 50px;
}

.child-align {
    border: 1px solid red;
    display: inline-block;
    height: 50px;
    vertical-align: top;
    width: 50px;
}

#container, #container-align, #container-align-whitespace {
    border: 1px solid black;
    height: 100px;
    width: 300px;
}

Output: