how to keep two div side by side if the second has a long text

I have a div in which there are two divs side by side. The width of the outer div and the width of the inner left div are fixed. I use display:inline-block to show two divs side by side, but if the text in the right div is too long, the right div will move to the second line. How can we make the text in the right div changes line inside the div instead of making the whole div move down?

<div style="width:300px"><div style="width:100px; dis开发者_JAVA百科play:inline-block; background-color:green">the first div</div><div style="display:inline-block; background-color:yellow">the second div with a long text, some more</div></div>

Thanks for your help.

---

Use floats, you have to give both of the elements a fixed width and float them left to eachother

<div style="width:300px">
    <div style="width:100px; float:left; background-color:green">the first div</div>
    <div style="width:200px; float:left; background-color:yellow">the second div with a long text, some more</div>
</div>

---

You could give the first <div> a float:left; CSS property and the second an overflow:hidden;:

<div style="width:300px"><div style="width:100px; float:left; background-color:green">the first div</div><div style="overflow:hidden; background-color:yellow">the second div with a long text, some more</div></div>

---

If the outer div, and the left-most inner div both have pre-defined widths, then by the process of subtraction, so does your right-most div

If your outer div is 300px and your left div is 100px, then wouldn't your right div be 200px?

http://jsfiddle.net/Jaybles/FCXgp/

...am I missing something?

---

You can also use display:inline-block instead of overflow:hidden

---

You have to float both divs, one to the left and the other (more text) to right, and also you have to give to the right div 200px width. Heres is the live demo: http://jsfiddle.net/zVRWR/2/