This scenario is bound to captivate CSS experts. Here, I delved into two distinct behaviors regarding box model support:
On one side: All mainstream browsers (IE, Chrome, Firefox, Opera, etc., from IE7+, etc., and even Safari for iPad or iPhones with iOS6+)
On the other side: Certain mobile browsers (tested on iPhone/iPod, and Samsung Galaxy Ace (Android) devices).
Below is the HTML code snippet
<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 Stylesheet
.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;
}
Link for testing purposes : http://jsfiddle.net/Kyk2P/1/
Now, let me share the analysis:
In standard browsers, the .nofloat
element stretches across the parent's width since it's not floated. The .floatright
element floats beside it on the right, shifting its content to the left. With overflow: hidden;
, the text remains in a column to the left of the floated element. As a result, no visible margin appears as it's applied to the right of the .nofloat container that essentially gets "covered" by the floated element. This outcome aligns with expectations.
However, on an iPod (iOS5) or Samsung Ace device, things take a different turn. The .nofloat
element only occupies the available space not taken by the floated .floatright
. Consequently, the container itself acquires a narrower context to apply margins and creates a wedge between the content (or rather, the container...) and the floated element.
An image speaks louder than words, so here's a visual representation of what occurs:
My queries are:
- Is this behavior expected?
- How should the CSS rule be formulated to ensure consistent results (ideally matching case #1) in both scenarios?
--- EDIT ---
Thanks to Angelin, I've learned that iPhones running iOS6 exhibit behavior similar to Case #1. However, previous iOS versions and Android phones lean towards Case #2. Quite a headache!