Our Blog

Related Posts

A brief, iterative tutorial on building a SASS mixin

Popular Tags

Recent Comments

Brendon Carvalho
4.26.2018 - MSSQL Long Text Field Truncated In PHP
Hire Volusion Developers
4.7.2018 - Drupal 8 Roadmap
Pixotech

Pixo

Here’s a common scenario: You want a page to have variable-width columns, but you don’t want to use tables to do this. For example, suppose you want three columns that resize with the window width to share the available horizontal space equally. Naively, you would think you could float three divs inside a containing div, set each inner div to have a width of 33.33%, and voilà!–you have three equally-sized re-sizing columns floating side-by-side with room to spare. But when you open your new page in Internet Explorer and start resizing the page, you are in for an unpleasant surprise, as this example shows.

[Disclaimer: I am not primarily a designer of Web sites. So I don’t really know if the issue I discuss here would ever really come up in the “real world” for designers who really know their stuff and are up on the latest best practices. That said, I have seen this sort of quirky behavior on very popular Web sites—a previous incarnation of the Drupal site, for one.]

What went wrong? What went wrong is that Internet Explorer’s seemingly common-sense algorithm for resolving column widths specified as percentages leads to some unexpected results.

As it turns out, a look at numbers and an explanation of the algorithm used shows that while unexpected, this quirky behavior is really quite predictable.

A look at the numbers

Here are the style rules used by the code in the example:

p { padding: 10px; }

.floater {
margin: 0;
padding: 0;
float: left;
width: 33.33%;
}
.leftdiv { background-color: #ffaaaa; }
.middlediv { background-color: #aaffaa; }
.rightdiv { background-color: #aaaaff; }

And here is an outline of the markup used on the page. (For simplicity, only one of multiple paragraphs is shown in each inner div.)

<body>
<div id=”container”>
<div><p>[TEXT OF COLUMN 1]</p></div>
<div><p>[TEXT OF COLUMN 2]</p></div>
<div><p>[TEXT OF COLUMN 3]</p></div>
</div>
</body>

The important thing to note is that we have an outer <div> with three floating <div>s contained inside it, and each inner div is set to have a width of 33.33% of the width of the outer div’s content area. Since the inner divs are set to have no margin, no padding, and (by default) no border, and since 33.33% + 33.33% + 33.33% < 100%, the three div should easily fit horizontally adjacent to one another (with even 0.01% to spare!).

But the problem is that the width of these inner divs can’t really be exactly 33.33% of the width of the outer div unless

0.3333 × (pixel width of outer div)

works out to be an integer. And this can only happen if the pixel width of the outer div is a multiple of 10,000, something well-nigh imposible on any ordinary monitor.

What’s a browser to do?

What Internet Explorer does is round each inner div width to the nearest pixel. And this is what causes the seemingly quirky behavior.

Example

Suppose the user has adjusted the browser window size so that the outer div ends up having a width of 700px. Since 33.33% of 700 is 233.31, each inner div will end up having a width of 233px. And since

233 +233 + 233 = 699 < 700,

the three divs fit side-by-side within the outer div with a pixel to spare, and so the layout of the columns is as expected.

But suppose the outer div ends up having width 701px. Since 33.33% of 701 is 233.6433, the browser rounds up, and each inner div will have a width of 234 pixels. Now we have

234 + 234 +234 = 702 > 700.

So the divs no longer fit side-by-side, and the right-most one gets bumped down to below the left-hand column.

NEXT: A formula for calculating how much leeway you must leave to ensure your inner divs will always be displayed side-by-side. PLUS: How Firefox does it.

Related Posts

A brief, iterative tutorial on building a SASS mixin

Recent Comments

Brendon Carvalho
4.26.2018 - MSSQL Long Text Field Truncated In PHP
Hire Volusion Developers
4.7.2018 - Drupal 8 Roadmap

Interested in working with us?
CONTACT US