Question

So i have this rather strange issue, i am trying to line up some divs but i came across this strange problem. Let’s say if i put <input type="checkbox" /> inside a div and would try to line it in the same line as other div it wouldn’t work no matter what i try but if i add some text to the second div it suddenly start to work, why is that happening?

Here is example of my code to make thing a bit clearer: http://jsfiddle.net/wxgVw/2/

<div id="container">
    <div id="container2">
        <div id="left">
            <input type="checkbox" />
        </div>
        <div id="right">

        </div>
    </div>
</div>

body{
    margin:50px;
}

#container{
    width:770px;
    height:400px;
    border:1px solid red;
}

#container2{
    width:700px;
    height:50px;
    margin:10px;
    outline:1px solid red;
    padding:10px;
}

#left{
    width:30px;
    height:30px;
    outline:1px solid green;
    display:inline-block;
    zoom:1;
    *display:inline;
}

#right{
    width:400px;
    height:30px;
    outline:1px solid black;
    display:inline-block;
    zoom:1;
    *display:inline;
}

Answer 1

Whenever you use display: inline-block it is always a good idea to also specify vertical-align: top (or bottom depending on what you want). That would prevent this issue.