Learn about how the float property affects the surrounding elements.
- [Professor] Earlier in the course, we talked about how the box model interprets the size of an element based on various box properties, all of which contribute to the total size and space an element takes up. When creating layouts with multiple columns within the same container, understanding the way elements are sized is very important. Let's say we wanted to create a sidebar with a main content area. To do so, we'll need to make sure that whatever size we choose, these two columns will fit within the container. Floats were historically used for creating full page layouts such as this. These days, with flexbox and grid becoming more stable, floats used in this way is less common. But as mentioned before, you may still run into legacy projects, plus, we haven't gone over flexbox or grid yet. So we'll be using floats to explore how the box model affects creating layouts. Let's open an exercise in Codepen. I've added some basic styles just to help us see the different page sections, but I haven't made any changes to the layout yet. So the first thing we'll do is set the width for the sidebar and the main content area. The wrapper has a width of 800 pixels shown here in line 14. So whatever we choose for the columns, the total of the two has to be equal to 800 pixels or less. I'm going to set the width of the sidebar to 200 pixels using the aside selector. And for the main content area, I'm going to use the article type selector with a width of 600 pixels. Though we change the width of these elements, the normal flow for block elements is to stack on top of each other. So let's add float left to align them side by side. When I add float to the aside element, the main content box moves up underneath it. But the content, just that little bit of text that says main content wraps next to the edge of the sidebar. When I add the float to the main content using the article selector, it will align next to the sidebar. But now there's something going on with the footer. We can still see the texts, but the background color has disappeared. Well, now that the main content box has been floated, the footer is just trying to stack underneath the non-floated element, the header. But the content, this little bit of text here still wraps around the floated elements. We only want the sidebar and the main content to be floated, so this is where we can apply the clear to return the layout back to the normal flow. So I'm going to add clear both to the footer. So far, so good. Now let's try adding some padding to the main content box to add some space between the texts and the edge of the box. So what just happened? Well, when we added padding, we increased the size of the box. The width of the main content area is now 600 pixels plus 20 pixels of padding on the left, and 20 on the right, which now totals 640 pixels wide. We can reduce the width to 560 to take into account the padding space. We can also reduce the height to 210 pixels to account for the padding space on the top and the bottom. While this works, we would have to keep adjusting the width and the height every time we wanted to change some padding. Another option is to change how the box model interprets the size of the boxes with the box sizing property. The initial box-sizing value is content-box. Width and height values change the size of the content-box. But when padding and border styles are added, they increase the size of the elements, adding to the width and height of the content box. Margin just adds the space around the element. Using the border-box value instead, we'll include the padding and border space within the dimensions set with the width and height properties. This will make the content-box smaller, but the overall element will maintain the same width and height values without any adjustments. This is often referred to as the box model fix. To use this fix, add this CSS code snippet to all of your projects. Let's go back to the codepen and add this fix. I've already added the fix right at the top of the CSS panel. So let's just remove the comment around the code itself right before the html and right after the closing curly brackets on line 10. Now if I set the height and width back to 250 and 600 pixels, it will fit within the container even with the padding values. (silence) Something to keep in mind here: since margin adds space around the element, changing the box sizing has no effect. It's still not included in the total size of the element. So if I was to add some margin here, the box will no longer fit. This fix was first documented by Paul Irish. If you want to learn more about the history and changes to the fix over the years, you can check out these links in the CSS. And since we have this snippet here, let's add this to our project now. Copy this entire snippet and add it into the top of your CSS file. I'm going to add mine right before the body selector.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts