How to prevent inline divs from going to the next line inside the parent?

Question

I have two inline divs that exceed the width of the parent. So the second div goes to the next line: http://jsfiddle.net/uVqG6/2/

How to keep both divs on the same line?

Adding overflow:hidden; in div.a just hides the second div.

Answer 1

You can use position: absolute; for this, otherwise there is no other way than increasing the width of the container div or creating nowrap

Demo

Using the z-index Demo

CSS

 .a { width: 100px; height: 50px; border: solid 1px #345; position: relative; } .b { width: 60px; height: 50px; background-color: red; } .c { width: 50px; height: 50px; background-color: green; position: absolute; right: 0; top: 0; } 

Answer 2

Here are some ways to do this. First of all, you can use display: inline-block; or float: left; to make divs sit side by side. They work differently, so be sure to use the correct option for your case.

Secondly, none of them will work if the containing div (a) is large enough to contain both divs on the same line. Or you can use overflow: hidden; in containing div (a).

Edit:

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

I had to use white-space: nowrap; since there were wraps inside the div.

Here is another answer that also answers your question: CSS: how to stop text from more than one line?

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

Answer 3

String elements behave just like text. If you want to prevent them from packing, delete the empty space that you used for formatting, or add white-space:nowrap; generally for .a .

Here is a demo: http://jsfiddle.net/bfkgT/

Answer 4

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

Does it do what you want?