CSS Standard Browsers vs. iPhone or mobile devices : two box models? trick example

Question

This should intrigue CSS specialists. Here is a situation where I experimented two different behaviors for the box model support :

On one side : All standard browsers (IE, Chrome, Firefox, Opera, etc., from IE7+, etc., and even Safari for iPad or iPhones with iOS6+)

On the other side : Some mobile browsers (tested iPhone/iPod, and on Samsung Galaxy Ace (Android) devices).

Here is the HTML

<div class="parent">
    <div class="floatright">Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent </div>
    <div class="nofloat">Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content </div>
</div>

CSS

.parent {
    background: yellow;
    width: 400px;
    height: 200px;
}
.nofloat {
    background: pink;
    float: none;
    margin-right: 20px;
    overflow:hidden;
}
.floatright {
    background: orange;
    float: right;
    width: 200px;
    margin: 0;
    padding: 0;
}

You can test it here : http://jsfiddle.net/Kyk2P/1/

Now here is the story :

In standard browsers, the .nofloat element spans the full width of its parent, because it is not floated. The .floatright element floats "over" it on its right side and for this reason, pushes its content to the left. The property overflow: hidden; does one more trick: instead of having the text wrapping the floated element, it stays in a column on the left. The floated element technically only pushes the "content" of the .nonfloat container, not the container itself, which has the following result : no margin is therefore visible, as it is applied to the right of the .nofloat container which is actually "covered" by the floated element. This is the normal result one would expect.

On an iPod (iOS5) or Samsung Ace device, the result is different. It seems like the The .nofloat element only fills the room in the parent container that is left empty after the .floatright has been floated to the right. Result : the container itself finds a narrower context in which to apply its margins and wedges on the floated element. In this case, we get a margin between the content (in fact, the container...) and the floated element.

An image being better than words, here is what happens :

My questions are :

1. Is this normal?
2. What way should the CSS rule be expressed so that we get the same result (preferably case #1) in both cases?

--- EDIT ---

Thanks to Angelin, I know now that iPhones with iOS6 get Case#1. However, iPhones with previous iOS and Android phones do get case#2. Nightmare!

Answer 1

According to CSS2.1 spec, this is a situation with undefined exact behavior. Since the .nofloat block has overflow:hidden, it establishes the new block formatting context. The spec says the following about this situation:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

So I believe this is normal. Both behaviors don't contradict the spec. While desktop and tablet browsers tend to use as much horizontal space as available, mobile browsers tend to make text blocks narrower in order to make it easier to read them on small screens. I believe that there is nothing to 'fix' in this behavior, but if you need more consistent display, you can use other layout models (e.g. display: table-* or Flexbox) instead of floats.

Answer 2

You can specify different CSS rules depending on the size of the view. Sounds like the systems have different methods of rending the CSS so you might have to be more specifc with these:

http://dev.w3.org/csswg/css-device-adapt/#viewport-descriptors