css setting div element to inline block

Question

I'm trying to set two div elements to inline but its not working as expected

fiddle

html

<div id="id1"></div>
<div id="id2"></div>

css

#id1{
    background-color:blue;
    display:inline;

    height:100px;
    width:200px;
}
#id2{
    background-color:green;
    display:inline;

    height:100px;
    width:200px;
}

Answer 1

You cannot specify width/height for inline elements..

Use inline-block instead

display:inline-block;

Demo at http://jsfiddle.net/gaby/CGHZ5/2/

---

And if indeed you want identical boxes which only differ in color, then use a class for the common properties..

<div id="id1" class="item"></div>
<div id="id2" class="item"></div>

and

.item{
    height:100px;
    width:200px;
    display:inline-block;
}
#id1{background-color:blue;}
#id2{background-color:green;}

Demo at http://jsfiddle.net/gaby/CGHZ5/4/

Answer 2

我想你正在寻找display: inline-block;

Answer 3

inline elements cannot have defined height or width, they take the height and width of their contents.

Just change all of your inline references to inline-block like so:

#id1{
    background-color:blue;
    display:inline-block;
    height:100px;
    width:200px;
}
#id2{
    background-color:green;
    display:inline-block;
    height:100px;
    width:200px;
}

Answer 4

Setting the width of a display:inline will not work, it just won't display. Use display:inline-block instead, although that has some legacy browser issues

Use this code instead

#id1{
    background-color:blue;
    display:inline-block;
    height:100px;
    width:200px;
}
#id2{
    background-color:green;
    display:inline-block;
    height:100px;
    width: