Alternatives to the Flexible Box Model CSS3

Flexible box layout is not the only new layout tool in CSS3. There are other layout systems and properties in the works, with varying levels of browser support. We’ll start with the best-supported, versatile boxsizing property, and then talk about what we can look forward to.

The box-sizing Property
In the traditional W3C box model of CSS 2.1, the value you declare for width or height controls the width or height of the content area only, and then the padding and border are added onto it. This is called the content-box model, and if you’ve worked with CSS for a while, you’re probably used to it and don’t really think much about it. But it can be inconvenient to work with at times, such as when you want to set a box’s width and padding in different units of measurement from each other, like percentages for the width and pixels for the padding.

For instance, what if we wanted to give each of the three featured product boxes in our bakery page a background color and use padding in pixels to move the content in the boxes away from the edges of the color? And what if we also wanted to give each box a border in pixels?

To see what would happen in this scenario, open the file box-sizing_start.html from the exercise files. It’s the same page, with the media queries removed just to keep things simple.

Find the existing .feature rule on line 116, about halfway down the style element in the head of the page. Modify the padding value to add padding to the sides and bottom of each box:


Next, add a background color and border:


Save your page and view it in a browser. The third box will have dropped down onto a new line . That’s because the total space each box takes up is 30 percent plus two pixels for the side borders plus 30 pixels for the side padding. When you add on the 4.5 percent margin on the first and second boxes, the total space the three boxes take up is now greater than 100 percent. How much greater than 100 percent we don’t know—it will be different at each viewport size—but the point is that combining pixels and percentages makes it impossible to know what width to set each box to in order to make them all fit.

The Desserts box has dropped onto a new line because the addition of padding and borders onto each box doesn’t leave room for it above.

The Desserts box has dropped onto a new line because the addition of padding and borders onto each box doesn’t leave room for it above.

To try to fix this, you could decrease the width of each box. Try setting it to 25 percent instead of 30, and you’ll see that the three boxes now fit on one line at some window sizes—but on narrower ones, the last box still drops down (Figure below). Plus, on very wide windows, there’s an extra gap to the right of the third box. They no longer perfectly fill up the row at all times.

Instead of changing the width of the boxes, another way to work around this would be to nest another div inside each feature box and apply the border and padding to this inner div instead. That way, each outer box would still take up exactly 30 percent, with the border and padding nested inside, effectively subtracted from that 30 percent.

Nesting a few extra divs in this page wouldn’t be that big a deal, but in complicated designs, the number of extra divs can really add up, which increases both your development time and the file size of the HTML and CSS.

Decreasing the width of each individual box makes all boxes fit across in larger viewports, but not in narrower ones.

Decreasing the width of each individual box makes all boxes fit across in larger viewports, but not in narrower ones.

The more efficient, CSS3 way to handle this is to leave the HTML alone and set the new box-sizing property to border-box instead of the default content-box. When a box is using the border-box box model, the browser will subtract the padding and border from the width of the box instead of adding it . You always know that the total space the box takes up equals the width value you’ve declared.

The difference between content-box and border-box is whether the width determines the size of the content area or the entire box from border to border.

The difference between content-box and border-box is whether the width determines the size of the content area or the entire box from border to border

With the width value back at 30%, add the box-sizing property, plus the -moz- and -webkit- versions, to the .feature rule:


The -moz- version is used by Firefox, the -webkit- version by Safari and Chrome, and the non-prefixed version by Opera and IE 8 and later. Now the total space each box takes up is still 30 percent, and the border and padding are inside this width, making the content area of each box 30 percent minus 32 pixels. This allows all three boxes to fit on the same line at all times .

With box-sizing set to border-box, all three boxes fit on the same line at all window sizes.

With box-sizing set to border-box, all three boxes fit on the same line at all window sizes.
box-sizing browser support

box-sizing browser support

WORKAROUNDS FOR IE 7 AND EARLIER
IE 7 and earlier versions do not support box-sizing, which, like flexible box layout, produces an effect that's more essential than purely decorative. Thus, you’ll probably want to provide a workaround.

In our case, the easiest workaround is to set the padding in percentages instead of pixels and reduce the width of each box by the same amount. Add the following new


This effectively maintains each box at 30 percent wide—two percent padding on each side plus 25 percent width equals 29.5, which leaves a little extra wiggle room for those pixel-sized borders. While percentage- sized padding may not be ideal, it looks only slightly different than pixel-sized padding, and it’s certainly better than having the third box dropped to a new line!

An alternative workaround is to put IE into quirks mode, which uses the same sort of box model as border-box provides. But we wouldn’t recommend it. For one thing, it’s much harder to put IE 7 into quirks mode than earlier versions. It basically requires you to use an old or ill-formed DOCTYPE, which harms all browsers. Plus, once it’s in quirks mode, you would need to make sure you were using the border- box model throughout your entire site; otherwise, some boxes will look correct in IE 7 and earlier and others will look broken.

Your final option for working around the lack of box-sizing support is to use a script. Dean Edwards’ IE7 script makes box-sizing work in IE, but only if you use the IE8.js or IE9.js version of the script. The downside to using a script, of course, is that it doesn’t work if JavaScript is not enabled. Again, the boxsizing property is more essential to the overall layout and look of the page, so relying on JavaScript may be a little risky in this case.

Future Layout Systems
Flexible box layout is not the only new layout system in CSS3. There are currently two other layout systems, called template layout and grid positioning. Both are in the early stages of development (especially grid positioning); no browser supports them or plans to do so soon.
However, it’s worth briefly describing each so you can get a glimpse of what may be coming down the road.

TEMPLATE LAYOUT
CSS3 template layout (previously called “advanced layout”) allows you o place content into “slots” in the page layout. You define these slots with letters placed into a grid, like ASCII art, in the display property.

For instance, here’s what a grid could look like:

Then, you assign divs to sit in each of those lettered slots, like so:

It can get a lot more complicated than this, of course—we haven’t assigned widths to any of the slots, heights to any of the rows, or gaps between elements, for instance. But the point is that you can move any div placed anywhere in the HTML to any spot visually on the page, and you can easily make elements span multiple columns. Some people love this flexibility and simplicity; others passionately hate the whole idea behind CSS3 template layout.

GRID POSITIONING
CSS3 grid positioning also allows you to create grids, naturally, but not with a series of letters. Instead, you use the grid-columns and grid-rows properties to explicitly declare a grid. You still use floating or absolute positioning to move the elements around the page, but you can place them in relation to the grid you’ve created using the new gr unit, a grid unit equal to the width of one of your columns, as well as the new float-offset property.

The first draft of the grid-positioning module came out in September 2007, and it hasn’t been updated since then, so its status is not very clear. The W3C may consolidate the template and grid modules together, partially or completely. Even if they don’t consolidate them, it remains to be seen if or how they can be used together, as well as how they interact with flexible box layout.

It’s all pretty murky right now.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

CSS3 Topics