Whitespace nowrap and float left "bug" in mobile Safari? - ios

Question

I'm making a web-app and came accross an interesting thing.
So I have a wrapper div with other divs in it. The wrapper has the following formating:
#ready{
height:568px;
white-space: nowrap;
}
their children divs have this:
.theme{
overflow: hidden;
position:relative;
display: inline-block;
height:568px;
width:320px;
text-align: center;
background-color: #FFF;
}
It works in firefox and chrome, the divs are next to each other as intended. I have to add float:left to .theme to make it work in Safari. Although when I add float:left Mobile Safari will break the divs to new lines.
Is this a bug, or am I doing something wrong? Any ideas, workarounds?
[EDIT]
Added html
<div id="ready">
<div id="welcome"class="theme active">
...
</div>
<div id="cat"class="theme">
...
</div>
<div id="minap"class="theme">
...
</div>
<div id="minecraft"class="theme">
...
</div>
<div id="padthai"class="theme">
...
</div>
<div id="orange"class="theme">
...
</div>
<div id="bszn"class="theme">
...
</div>
</div>

Answer 1

Since you've tried variations of float: left, display: inline-block, position: relative and position: absolute to get your row to stay in one line, but it always breaks into two lines on one device/browser or another, maybe a table layout will achieve your goal.
You can use either the HTML <table> element or CSS table properties. In my example below I've gone with CSS.
http://jsfiddle.net/w01ckufb/2/
HTML
<div id="container">
<div id="ready">
<div id="welcome"class="theme active">IMAGE</div>
<div id="cat"class="theme">IMAGE</div>
<div id="minap"class="theme">IMAGE</div>
<div id="minecraft"class="theme">IMAGE</div>
<div id="padthai"class="theme">IMAGE</div>
<div id="orange"class="theme">IMAGE</div>
<div id="bszn"class="theme">IMAGE</div>
</div><!-- end .ready -->
</div><!-- end #container -->
CSS
#container {
display: table;
width: 4000px;
border-spacing: 15px;
}
#ready{
display: table-row;
border: 2px solid red;
}
.theme {
display: table-cell;
height: 568px;
width: 820px;
text-align: center;
background-color: #FFF;
border: 2px dashed blue;
}
Hope this helps. If you have any questions leave a comment below.