CODEWITHSUNDEEP
htmlcss
user1050619
user1050619

Reputation: 20916

css setting div element to inline block

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

Upvotes: 1

Views: 788

Answers (4)

scrblnrd3
scrblnrd3

Reputation: 7426

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:

Upvotes: 0

Ennui
Ennui

Reputation: 10190

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

Upvotes: 0

ryanbrill
ryanbrill

Reputation: 2011

I think you're looking for display: inline-block;

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

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/

Upvotes: 3

Related Questions