Convert a div within a div to inline - html

Question

I'm trying to convert a div element within a div to inline but its not working as expected.
Code:
HTML
<div id="price-results">
<div id="price"><div>Unit Price</div><div>5</div></div>
<div id="qty"><div>Quantity</div><div>2</div></div>
<div id="total"><div>TotalPrice</div><div>10</div></div>
</div>
CSS
#price,#qty{
display:inline
}
JSFiddle

Answer 1

I agree with the comment before.
Apart form that, your CSS needs to target the inside the container like this:
#price div,
#qty div,
#total div{
display:inline
}
… see this fixed jsFiddle.
Some other notes on your HTML + CSS:
you should consider using classes instead of IDs
You could also
target the elements by a single descendant rule like this (jsFiddle)
#price-results > div div {
display:inline
}

Answer 2

#price-results div{
display:inline
}

Answer 3

Update your css like below
#price, #qty{
display:inline-block;
}

Answer 4

Why dont you use float:left instead of display:inline
Here is the demo

Answer 5

Why nesting so many divs unnecessarilly. Its not compulsary to include every element in div. This works fine :-
<div id="price-results">
<div id="price">Unit Price 5</div>
<div id="qty">Quantity 2</div>
<div id="total">TotalPrice 10</div>
</div>
http://jsfiddle.net/qqTDq/2/

Answer 6

DIVs are block-level elements by default. I would switch the inner-DIVs to SPANs, which are inline by default:
<div id="price-results">
<div id="price"><span>Unit Price</span> <span>5</span></div>
<div id="qty"><span>Quantity</span> <span>2</span></div>
<div id="total"><span>TotalPrice</span> <span>10</span></div>
</div>
If your intention is to align the numbers then I would switch to a table.

Answer 7

*,div{
padding:0;
margin:0;
display:inline;
}
#price,#qty{
display:inline;
border:1px solid red;
}