Start learning with our library of video tutorials taught by experts. Get started

CSS3 First Look

Working with box-sizing


From:

CSS3 First Look

with James Williamson

Video: Working with box-sizing

Anybody that remembers dealing with Internet Explorer 5 and the box model hack has a no desire to go back to those days. For those of you that weren't around for that little party, essentially Internet Explorer 5 passed element widths differently than the box model recommendation in CSS2. Instead of adding the element's width to the padding and the border to calculate the element's total width, Internet Explorer 5 would modify the element's content so that the total width, borders, padding, and all, would match up to the defined value and as you can imagine, that caused many, many layouts to break.
Expand all | Collapse all
  1. 3m 5s
    1. Welcome
      1m 20s
    2. Using the exercise files
      1m 45s
  2. 31m 30s
    1. What is CSS3?
      5m 26s
    2. The current status of CSS3
      3m 35s
    3. An overview of CSS3 capabilities
      2m 24s
    4. Can you use CSS3 now?
      5m 31s
    5. Detecting support for CSS3
      9m 0s
    6. Understanding vendor prefixes
      5m 34s
  3. 1h 9m
    1. An overview of child and sibling selectors
      3m 11s
    2. Using child and sibling selectors
      7m 17s
    3. An overview of attribute selectors
      3m 19s
    4. Using attribute selectors
      8m 32s
    5. Pseudo-class UI selectors
      5m 56s
    6. Negation pseudo-class selectors
      6m 48s
    7. Target pseudo-class selectors
      5m 39s
    8. Structural selectors
      3m 58s
    9. Nth-child selector syntax
      10m 0s
    10. First, last, and only structural selectors
      5m 39s
    11. Using structural selectors to write more efficient code
      8m 52s
  4. 45m 28s
    1. Color formats in CSS3
      7m 9s
    2. Transparency in CSS3
      9m 10s
    3. CSS3 gradients
      4m 11s
    4. Creating linear gradients
      13m 57s
    5. Creating radial gradients
      11m 1s
  5. 49m 8s
    1. Working with web fonts
      6m 38s
    2. @font-face syntax
      4m 52s
    3. Downloading sample fonts
      6m 5s
    4. Writing @font-face declarations
      7m 57s
    5. Using web fonts
      6m 42s
    6. Using text shadows
      7m 14s
    7. Creating multi-column text
      9m 40s
  6. 50m 55s
    1. An overview of the flexible box model
      4m 42s
    2. Controlling box orientation
      5m 2s
    3. Setting element flexibility
      12m 59s
    4. Distributing boxes
      7m 54s
    5. Controlling box alignment
      12m 38s
    6. Working with box-sizing
      7m 40s
  7. 1h 5m
    1. Using border-radius
      6m 20s
    2. Creating custom rounded corners
      10m 21s
    3. Understanding border images
      5m 15s
    4. Using border images
      8m 52s
    5. Creating box shadows
      8m 58s
    6. CSS3 backgrounds
      4m 55s
    7. Controlling background size
      8m 46s
    8. Creating multiple background images
      6m 4s
    9. Using background-origin
      3m 18s
    10. Clipping background content
      3m 2s
  8. 40m 8s
    1. An overview of CSS3 2D transforms
      4m 26s
    2. Using 2D transforms
      8m 16s
    3. Setting transform origins
      5m 24s
    4. An overview of CSS3 transitions
      5m 0s
    5. Animating CSS properties
      6m 12s
    6. Using easing in animations
      5m 41s
    7. An overview of 3D transforms
      5m 9s
  9. 37m 56s
    1. Understanding media queries
      6m 18s
    2. Strategies for targeting multiple devices
      6m 4s
    3. Writing styles for target screen sizes
      12m 11s
    4. Deploying styles through media queries
      3m 55s
    5. Basing media queries on page orientation
      2m 24s
    6. Targeting media queries for iOS devices
      7m 4s
  10. 1m 6s
    1. Goodbye
      1m 6s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
CSS3 First Look
6h 34m Appropriate for all Nov 29, 2010

Viewers: in countries Watching now:

In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.

Topics include:
  • Understanding the history of CSS3
  • Working with the new selectors
  • Adding transparency and gradients
  • Specifying web fonts with @font-face
  • Understanding the advances to page layout
  • Looking at CSS3 box model capabilities
  • Using 2D and 3D transforms
  • Understanding media queries
Subject:
Web
Software:
CSS
Author:
James Williamson

Working with box-sizing

Anybody that remembers dealing with Internet Explorer 5 and the box model hack has a no desire to go back to those days. For those of you that weren't around for that little party, essentially Internet Explorer 5 passed element widths differently than the box model recommendation in CSS2. Instead of adding the element's width to the padding and the border to calculate the element's total width, Internet Explorer 5 would modify the element's content so that the total width, borders, padding, and all, would match up to the defined value and as you can imagine, that caused many, many layouts to break.

However, was it really all that bad? Are there times when you need an alternate way to calculate width? Actually, sometimes yeah, you do, and in CS3 we are given the box-sizing property in order to help us do just that. Let's take a look by opening up the box_ sizing.htm. A very simple structure here. We simply have 2 div tags, so if I scroll down the code we can see that we have two div tags inside of a wrapper element. Now currently the wrapper element is set to have a width of 900 pixels and box one and box two are set to have a width of 400 pixels and padding of 25.

Now I'm no math whiz, but if I have a left padding of 25 and a right padding of 25 and a width of 40, that's going me a total element width of 450 pixels and 450+450=900. So if I view this in my browser, these elements are occupying all of the available space and they are butting right up against each other. So what if somebody, one of my supervisors or someone says, "I can't tell the difference, put a border around these elements so I know who's who." Okay, fair enough.

So if I go back in my CSS and for first one just say okay, give it a border of 1 pixel solid #333, that's sort of a dark gray. We'll do the same thing for the second one. Border of one pixel solid #333. Now I am guessing that some of you guys already know what's going to happen here. If I save this and test it, boom! The layout breaks. Now why does the layout break? Well, I have added more width to the total width of these elements. Not much. One pixel on this side, one pixel on that side, so 4 pixels of extra width in total, but it's enough to break the layout and that happens a lot.

So we have to spend a lot of our time as designers calculating these total widths, making sure that we don't have one pixel's worth of padding here, or one pixel's worth of a border here that's going to cause our layouts to break. It's especially a problem when you're dealing with flexible layouts. Let me show you what I mean. Let's say we go up to our wrapper and make our wrapper 80% and then we go back down to our div tags and we take out this defined width of 400 pixels and change that to 40%.

Now again, 40% + 40% gives us 80% of the available space in our wrapper. That should leave us with 20% of the available space left over for our gutter between the two of them. One is floated to the left and one is floated to the right. If I save this and preview this in my browser, I get exactly that. So here the layouts are working just fine, but it is a flexible layout. What happens if my screen size changes or views this on a smaller screen? At a certain point it breaks and it breaks because of the element's content, the padding and the borders, they just simply can't fit within the space anymore, so we get column break.

Again, that's a direct result to the fact that this element isn't allowed to scale down, pass that available content. It's all in how content width is being defined. Okay, so CSS3 gives us a new property called box-sizing, and box-sizing has two possible keywords that you can use.=, border-box and content-box, and let's talk about those by actually doing them. So I am going to go to my number one selector here, the first element, and we are going ahead and use the box-sizing property. So -moz, so we are still need to use prefixes for the time being on these, box-sizing and I'm going to do border-box.

Now I'll talk about what this means in just a moment. Let's go ahead and get the rest of the selector written as well, so let's do webkit-box-sizing:border-box and then we will do the same thing, just regular old box-sizing, border-box, and then we will do the same thing. Just regular old box sizing, border box here as well. I am going to copy this and paste it into my second one. I'll save that. Right, so what does box-sizing do for us and what does border-box in particular do? Well, box-sizing essentially tells the browser that the way that you've been calculating the width of these elements, let's change that up a bit.

Now content-box is sort of the old way to do it. It's a standard way of calculating width and you won't see any change if you use content-box. Essentially it's saying, the total width is a calculation of the content width, the padding and the borders. Border-box on the other hand says wait a second, keep the padding and keep the border widths as well, but you are going to flex that content width so that the overall width is whatever the specified width is, in this case 40%. So again, if we save this and test it, you can see now that we really do have a flexible layout and as these elements get smaller, the content width is losing ground so that 40% can remain.

Now eventually, we have some overflow happening within Chrome, but it's trying to respect that content as much as it can, so we don't get column breaking. Now let's try the same thing in Firefox and we get a very similar result. We just don't have that same problem that we had earlier that was caused by how those element widths are being calculated. Now what's nice about this is it doesn't really matter what your padding and your border is. It's going to reduce the content width in order to make the widths fit.

So if I increase my padding, let's say I increase the padding to 50 pixels on both of those, the behavior is still going to be the same. So as I save this and preview this in Chrome, notice that even though the padding is much higher, the width is still restricted to that 40%. Now that's causing the content itself to break and it's leaving it much less room, but in the end the layout is being preserved, and in many cases that's a little but more important than the actual content width itself, and of course, that's a value call that you make. Which is great, because the box-sizing property gives us the ability to make that call.

I don't want to give Internet Explorer 5 too much credit, but to be honest, it's actually really nice to see that we have that ability now. That the box-sizing property. It's just giving us another option in how to calculate those element width. And it certainly makes creating flexible layouts a lot easier to style, because we don't have to do all those precise calculations, especially when percentages are involved. As you can see, box-sizing is well supported even by Internet Explorer, although vendor prefixes are for the moment still required in all the browsers, except for Opera.

So box-sizing is definitely something that you can take advantage of now. I don't see the implementation changing too much over the course of it becoming a proposed recommendation. Just be sure to use this vendor prefixes on box-sizing and I think it's something that can really help you when you're creating your layouts, especially when creating flexible layouts.

Find answers to the most frequently asked questions about CSS3 First Look.


Expand all | Collapse all
Please wait...
Q: I'm following along with the video "Transparency in CSS3".  James shows us how to achieve transparency in Internet Explorer by going to Kimili.com and entering a HSLA value to generate code for transparency.

Here that code:

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B); /* IE6 & 7 */ zoom: 1;

When this code is added to my HTML file it removes transparency on browsers that do in fact support it. So I'm left with NO transparency. Why?
A: The problem is in the filter code. If the IE background is called last, the first "transparent" declaration will remove all previous colors, regardless of browser. To resolve this, place the rule inside a conditional comment for IE or remove the "transparent" declaration at the front of the rule.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS3 First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

CSS3 First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked