Align divs horizontally even if off-screen - css

Question

I'm trying to line up divs horizontally, even if they go off-screen. Im using display: box;
<div id="container">
<div class="box">
1
</div>
<div class="box">
2
</div>
....
....
</div>
.box{
background-color: #7f94a7;
color: #fff;
height: 5.2rem;
width: 6rem;
display:table;
}
#container{
display: box;
display: -webkit-box;
}
Check out the jsfiddle here.
This works fine in chrome but in internet explorer 10, the box are aligned vertically....

Answer 1

Not really sure what the display:table is supposed to do on the .box class -- there aren't any cells or rows inside of it, so it isn't table-like at all. The table box sizing model is made to flex the width of the cells. Take a look at this example to see display:table in action... resize the output panel to see what happens: http://jsfiddle.net/vz33sfwc/
.box{
display:table-cell;
}
#container{
display:table;
}
It sounds like you actually want the boxes to NOT flex, but to go off-screen. To do that, we'll set the boxes to use display:inline-block -- this makes them sit next to one another on a single line. Then, we tell the container how to treat white space for the inline elements with white-space: nowrap;
.box{
display: inline-block;
}
#container {
white-space: nowrap;
}
See it in action here, again resizing the output panel for the effect: http://jsfiddle.net/k9yp05mj/ -- notice we get a horizontal scrollbar and the boxes do not flex in size.
Documentation
CSS whitespace on MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
CSS display on MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 2

Change your display: box; to display: inline-box; and use overflow: to keep or hide run-off from being visible.
As stated above, white space: nowrap; on content fixes issue.
CSS:
.box{
background-color: #7f94a7;
color: #fff;
height: 5.2rem;
width: 6rem;
display: inline-block;
}
#container{
display: box;
display: -webkit-box;
overflow-x: auto;
white-space: nowrap;
}

Answer 3

try just with "display : inline" for the child div.keep width auto i.e depending on content it'll adjust Check the fiddle here - http://jsfiddle.net/invincibleJai/p5tebcua/45/
Code:
.box{
background-color: #7f94a7;
color: #fff;
height: 5.2rem;
width: 6rem;
display:inline;
padding:0.2em;
}
<div id="container">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
<div class="box">
5
</div>
<div class="box">
6
</div>
<div class="box">
7
</div>
<div class="box">
8
</div>
<div class="box">
9
</div><div class="box">
10
</div>
<div class="box">
11
</div><div class="box">
12
</div>
<div class="box">
13
</div>
</div>