Forced div extension than browser window

Question

How to make the DIV expand than the browser window, to place it horizontally, rather than force them in new lines.

i.e. consider the following code with a violin. There are 6 child elements inside the container element, all with a minimum width of 200 pixels and all set to float: left. When the window size changes quite wide, they are all on the same line. When it narrows, they begin to push toward new rows. Ideally, I would like them to stay on the same line and display a scroll bar on the browser panel.

http://jsfiddle.net/krippy2k/x8sDp/20/

.container { } .child-element { min-width: 200px; float: left; height: 100px; } .child1 { background-color: purple; } .child2 { background-color: orange; } .child3 { background-color: black; } .child4 { background-color: green; } .child5 { background-color: blue; } .child6 { background-color: red; } <div class="container"> <div class="child-element child1"></div> <div class="child-element child2"></div> <div class="child-element child3"></div> <div class="child-element child4"></div> <div class="child-element child5"></div> <div class="child-element child6"></div> </div> 

Answer 1

Or you can provide width parent element, otherwise you can use float: left; with display: inline-block; and white-space: nowrap;

 .container { white-space: nowrap; } .child-element { min-width: 200px; display: inline-block; height: 100px; } 

Demo

For white-space of 4px between each element, you can use margin-left: -4px;

Demo 2

Answer 2

Instead of swimming with children, install them in the built-in unit and install white-space:nowrap in the container.

 .container { white-space:nowrap; } .child-element { display:inline-block; min-width: 200px; height: 100px; } 

http://jsfiddle.net/x8sDp/24/

Answer 3

Just set .container to display:table and .child-elements as display:table-cell and remove float:left from .child-element :

 .container { display: table; } .child-element { min-width: 200px; display: table-cell; height: 100px; } 

Demo

Answer 4

Adding huge width to container operation

 .container { width: 999999px; } 

Although I'm not sure why you would like to do something like this in terms of usability / interface.