Flexible layouts: Min- and max-width poorly implemented in browsers

Wouldn't you, like me, love to create a flexible, nice layout of three DIVs floated to the left, perhaps with some padding between? And achieve flexibility simply by giving a min- and max-width to some containing element, a #wrapper, as well as using min- and max-widths on one or more of the contained DIVs and see them shrink and expand as the viewport got narrower or wider? To have a simple, easy way to create a DIV-based layout that behaves the way tables do, but without having to use a table to lay out divisions filled with content other than data?

As we all know, it isn't quite that simple. Below are four "layout" that are build this way - each have three columns contained in a #wrapper. The leftmost column has a min- and a max-width, and so does the container.

Here are the four layouts. The first has three DIVs floated left. The second has three LIs floated left. The third is a table. The fourth is a relatively convoluted "negative margins" DIV layout. The look alike, but behind the scenes they are quite different.

3. Table, styled with CSS, min & max-widths
Same outer DIV

tBox 1 - min & max widths Needs some content to fill up and use max-width.

tBox 2

tBox 3

Do they drop columns?

The desired behavior in all cases is that as the viewport gets narrower, the leftmost column that has min-width shrinks, and that the layout does not drop the right column until the left one has shrunk to the defined minimum width. But that, of course, is not what happens.

Below are the same boxes/layouts - but now held within a 340px container DIV to simulate what happens when the viewport gets narrower.

3. Table, outer DIV fixed width

tBox 1 - min & max widths Needs some content to use max-width.

tBox 2

tBox 3

As you can see, the result is pretty bad. Both the ordinary DIV-based and the LI-based layouts just drop the right columns, without shrinking the left columns at all. The table shrinks just they way we want, and so does the negative margin layout. (You can study the bevior of the boxes in our demo too.)

W3C, Mozilla, Opera, Google, Microsoft: We need a smarter implementation of min-width!

What happens is that in the case or ordinary DIVs and LIs - other elements used for divisions too for that matter - is that the browsers respect min- and max-width. But they only apply it to the element itself. So it doesn't matter to the browsers that the flexible element sits within a flexible context, the way it matters that there is a flexible table cell in a flexible table.

The negative margin example shows that it is possible to work around this problem. But layouts like that are pretty convoluted. It would be much better to have an intelligent or context sensitive implementation of max-width and min-width. That would make it possible for almost everyone to create good looking, semantically correct layouts.

Alternatively, perhaps something like "display: flexible" could be implemented? A CSS property, like "display:inline" that could alert the rendering machines to the existence of a flexible box with flexible content? And where the rendering machine would then shrink shrinkable content both in parent and child elements as far as possible before dropping an element of the flexible box down to the next "line"?

Posted: October 2011