CODEWITHSUNDEEP
htmlcss
Linas
Linas

Reputation: 4408

Simple html divs lining "bug"

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;
}

Upvotes: 0

Views: 49

Answers (2)

apparat
apparat

Reputation: 1952

You could also use the float property. Just float both divs to the left and make sure overflow: hidden is set to to container above to prevent floating issues.

I edited your sample: http://jsfiddle.net/wxgVw/4/

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

#left{
    width:30px;
    height:30px;
    outline:1px solid green;
    float:left;
}

#right{
    width:400px;
    height:30px;
    outline:1px solid black;
    float:left;
}

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

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.

Upvotes: 2

Related Questions