How to prevent inline divs from jumping to the next line within a parent?

Question

I have two inline divs which exceed in width the parent's width. Therefore the second div jumps to the next line: http://jsfiddle.net/uVqG6/2/

How can I keep both divs on the same line?

Adding overflow:hidden; to div.a simply hides the second div.

Answer 1

Theres a couple of ways to do this. First of all, you can use display: inline-block; or float: left; to get the divs to sit side by side. They work different, so be sure to use the right one for your case.

Second, neither of those will work unless the containing div (a) is large enough to contain both of the divs on the same line. Or, you can use overflow: hidden; on the containing div (a).

Edit:

I've updated your example: http://jsfiddle.net/uVqG6/11/

I had to use white-space: nowrap;, since the inside divs were wrapping.

Here's another answer which also answers your question: CSS: how to stop text from taking up more than 1 line?

Remeber that using display: inline-block basically treats the element as text, so most text-formatting css properties will apply to it.

Answer 2

.a {
width: 100px;
height: 50px;
border: solid 1px #345;
white-space: nowrap;
overflow:hidden; }

Does this do what you want?