CSS Standard Browsers vs. iPhones and other mobile devices: A Comparison of Box Models with a Clever Example

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:

  1. Is this behavior expected?
  2. 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!

Answer №1

As per the CSS2.1 specifications, this scenario falls under undefined behavior. The .nofloat block, due to having overflow:hidden, establishes a new block formatting context. The spec provides insight on this situation in the following excerpt:

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.

Hence, I consider this behavior to be typical. Both outcomes do not contradict the specifications. While desktop and tablet browsers usually utilize available horizontal space fully, mobile browsers tend to narrow text blocks for enhanced readability on smaller screens. I believe there is no need to "fix" this behavior, but if you desire more consistent display, alternative layout models like display: table-* or Flexbox can be used instead of floats.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing sqlite with django left join and right join features

I have a scenario with two tables presented below : country id name 1 A 2 b 3 c state id | country_id | name | population 1 | 1 | x | 234354 2 | 1 | y | 2334 3 | 2 | h | 232323 4 | 2 | E | 8238787 N ...

Scrollable navigation bar at the bottom styled with Bootstrap

I've been trying to find an answer to this question online but haven't had any luck. I designed a responsive bottom navbar with Bootstrap, but I'm encountering an issue when listing multiple items using the <li> tag - it creates a new ...

Is there a way to wrap label text when using Highcharts Grouped Categories?

Is it possible to wrap my label text or increase the cell height to make it responsive? Check out my jsfiddle example. See how the labels are overlapping here Here is the HTML: <div id="container" class="chart-container"></div> And this is ...

Combining Assembly (.S) file with iPhone project during compilation

Within my iPhone project, there is an assembly file named arm_asm_stub.S that contains a necessary method to be called from another file called main.c. Interestingly, if I do not include this file at the top of main.c, there are no build errors, but I enco ...

Develop a custom WordPress meta box for managing the color scheme of individual posts and pages

Currently, I am in the process of learning how to create a custom WordPress meta box with a select tag for controlling the color scheme of individual posts/pages. My goal is to implement a system where I can use if statements to load an additional CSS file ...

The website's content is displayed as a mobile-friendly menu

I've been working on creating a responsive menu using HTML and CSS, and everything is functioning well so far. However, I'm facing an issue with the mobile view of the menu. When the menu opens up, it obstructs the text below it, making it diffic ...

Trouble with custom breakpoints in Tailwind CSS - not behaving as expected

I added a custom breakpoint ('mymd': '962px') and now the breakpoints with lower widths are not functioning properly tailwind.config.js module.exports = { purge: [], darkMode: 'media', // or 'media' or 'cla ...

Leveraging node.js and express for incorporating custom stylesheets and scripts

I recently designed a webpage with the following elements at the beginning: <link href="./css/font-awesome.min.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet ...

Inconsistent display of Bootstrap tooltip upon mouseover

Utilizing an icon from Font Awesome to showcase text in a tooltip upon mouseover with Bootstrap, I encountered an issue where the tooltip only displays when hovering over the left half of the icon. This discrepancy occurs on both Edge and Chrome browsers, ...

Issue with banner not appearing after importing HTML document

On my website, I have a picture banner at the top that I got from a web service. To make editing easier, I import the header.html code into the home.html file. The banner displays perfectly when I run header.html, but not when I run home.html. When I inspe ...

Issue with Swiper JS: The buttons on pages three and beyond are unresponsive

I'm having trouble with the functionality of the "Back" button on pages 2 and 3 of my website. Can anyone help me figure out why it's not working? My goal is to create a website that resembles a game menu, similar to Deus Ex The Fall. I'm u ...

Not all Angular Material2 styles are being fully applied

One issue I am encountering is that styles for components such as <mat-chip> or <button mat-raised-button> (the only ones I have found) are not working properly and appear gray by default. However, styles do apply correctly to the <mat-card& ...

BEM CSS Element or variant

I am currently in the process of transitioning to BEM CSS and have created a component that I would like to have both small and large versions at the block level. I am struggling with determining which part should be considered the block and which should ...

Looking to make changes to the updateActivePagerLink setting in JQuery Cycle?

I'm in the process of developing a basic slideshow with 3 images, and I am relatively new to Jquery and Cycle. The slideshow is functioning properly, and the 3 pager links are also functional. The only remaining task for me is to implement "activeSli ...

Scroll through content using buttons in JavaScript can be utilized repeatedly as needed

I want to showcase a collection of movies on my website through a horizontal, scrollable div. Since I disabled the scrollbar, users can no longer scroll, leading me to incorporate two buttons - one for moving right and one for moving left. However, the i ...

Click on the navlink to open the HTML page in the same window

I have developed a navigation bar with a menu that includes options like home, about-us, and more. When I click on the navbar, the nav-menu slides down to display a list of navlinks. However, when I select a navlink, such as about-us, the nav menu slides b ...

Deleting entries from a selection of items in a list generated from an auto-fill textbox

I have successfully implemented an auto-complete Textbox along with a styled div underneath it. When the client selects an item from the Textbox, it appears in the div after applying CSS styling. Now, I am looking to create an event where clicking on the s ...

Combining CSS to Align Two Form Fields Side by Side

I recently came across an online form and I'm attempting to customize it by aligning the phone and email text fields next to each other. I have made some progress, but the formatting is not quite right. The fields are too small and adjusting their siz ...

Unlock the innerHTML of a DIV by clicking a button with ng-click in Angular JS

I am curious about something. There is a <div> and a <button> in my code. I am looking to access the inner markup of the <div> within the ng-click function without relying on jQuery. Can you give me some guidance? <div id = text-entry ...

Ruling out the use of jQuery script within a dynamic framework

I have a unique jQuery script to create a "Back to Top" functionality: <script type="text/javascript"> $(document).ready(function(){ // Initially hide the #TopButton $("#TopButton").hide(); // Fade in the #TopButton on scrolling $(function () { ...