Question

jsFiddle

I am trying to get these 4 divs to sit on the same vertical line. Why does the presence of buttons change the position of the first div?

HTML

<div class="box">
        <button>Y</button> <button>N</button>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>​

CSS

.box {
    width:200px;
    height:200px;
    padding:10px;
    display:inline-block;
    border:1px solid black;
    text-align:center;
}​

RESULT

Answer 1

Add vertical-align:bottom to the style of your divs.

The cause of your problem is the presence of any content, as it defines the baseline for the div.