Question

My divs are displaying a staircase effect, as shown below. Usually in tables you can use vertical-align: top, not sure how to do this for divs.

 ____1_____     
            _____2_____      
                        ______3_____

The CSS I have so far is:

   .areadiv
{
float:left;
display: inline-block;
height:auto;
margin:0 auto; 
width:130px;
padding:5px;
}

The HTML is:

<div>
<div class="areadiv">
content
</div>
</div> 

Answer 1

Your CSS doesn’t make so much sense with the layout you’re are trying to achieve, it should be:

.areadiv {
  float: left;
  display: block;
  width: 130px;
  padding: 5px;
}

The margin: 0 auto; is used for centering container divs and you don’t need the inline-block.