Insert nested divs / span on one line

Question

I have a structure that looks like this fiddle http://jsfiddle.net/qqqh1agy/1/

HTML:

<div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> 

CSS

 .outer{ width: 100px; height:20px; overflow: auto; } .inner{ background:red; width:50px; float:left; height:20px } 

I want the inner divs to be in line with the horizontal scrollbar. Is it possible?

Any ideas that were highly appreciated

FROM

Answer 1

Add white-space:nowrap; in div outer , then replace float:left with display:inline-block with div inner

This makes the internal elements appear on one line, while preventing them from being wrapped to the next.

Demo script

 .outer { width: 100px; height:20px; overflow-x: scroll; white-space:nowrap; /* <-- force items to display on the same line */ } .inner { background:red; width:50px; height:20px; display:inline-block; /* <-- display 'in a row' */ } 

However, in order to properly display the scroll bar and content, you can change your CSS to:

Demo script

 .outer { width: 100px; overflow-x: auto; /* <-- show horizontal scrollbar */ overflow-y:hidden; /* <-- hide vertical scrollbar */ white-space:nowrap; } .inner { background:red; width:50px; height:20px; display:inline-block; } 

Answer 2

yes, you can use inline-block for this in combination with white-space: nowrap . It will put all the elements on one line without packing them.

script: http://jsfiddle.net/1zmeztt3/1/

 .outer{ width: 100px; height:40px; overflow-x: auto; white-space: nowrap; } .inner{ background:red; width:50px; height:20px; display: inline-block; } 

You should also use overflow-x to prevent vertical scrolling and increase the height of the line to make sure that the scroll bar fits inside it.

Answer 3

The problem you are facing is that the three floating divs calculate their positions based on the width of the parent element. A reasonable solution would be to nest 2 outer divs, with the inner one wide enough for all 3 floating divs, and the outer one with limited width and scrolling.

HTML:

 <div class="outer"> <div class="nest"> <div class="inner"></div> <div class="inner blue"></div> <div class="inner"></div> </div> </div> 

CSS

 .outer{ width: 100px; height: 30px; overflow-x: scroll; overflow-y: hidden; } .nest{ width: 150px } .inner{ background:red; width:50px; float:left; height:20px } .blue{ background: blue; } 

jsfiddle

Problems can arise because the width of the inner div depends on how many floating divs you have and how wide they are. Therefore, this solution may not be the best if these factors can be arbitrary.

Edit: I would go with the SW4 solution, but it may not work in older IE browsers.

Answer 4

You can try:

clear: none;

Here is the link: http://www.w3schools.com/cssref/pr_class_clear.asp

Invalid response after editing the original message.