带有内联块的div上的文本溢出

Question

I have a inline block within a div that has some text contents. The text contents are overflowing if the display is set to inline...

http://jsfiddle.net/76d9twoy/

HTML & CSS

<div id="leftdiv">
</div>
<div id="rightdiv">
       <div id="nametag">Simba Animated Plush Battery Operated Sitting Talking Tom, Multi Color (9-inch)<div>
       <div id="pricetag">10.00$<div>
       <div id="quantitytag">10<div>
</div>



#leftdiv{
    float:left;
    width:100px;
    height:100px;
    background-color:blue

}

#rightdiv{
    float:left;
    width:400px;
    height:100px;
    background-color:yellow
}
#nametag{
    width:200px;
    display:inline;

}

Question: How do I text wrap the nametag contents?

Answer 1

But what is the problem? if you want it inline-block than can you do this to fix it:
css:

#nametag{
width:200px;
display:inline-block; //set to inline-block
}

#rightdiv{
float:left;
width:400px;
height:auto; //set to auto
background-color:yellow
}

than at this Jquery code to the page to set the leftdiv height the same as the rightdiv

Jquery:

$('#leftdiv').css( 'height', $('#rightdiv').height());

than you get this a result http://jsfiddle.net/76d9twoy/1/

Answer 2

You have to switch from inline to inline-block if you want them to fit next to each other. In addition, be careful with your tags. Your divs were not closed. You must use:

</div>

To fix the single line, use white-space property.

white-space:nowrap;

Here is the jsfiddle: http://jsfiddle.net/76d9twoy/2/