I'm trying to set two div elements to inline but its not working as expected
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;
}
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;}
I think you're looking for display: inline-block;
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;
}
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:
