By: Zoe Gillenwater
Page 1 of 2
In order to become a skilled CSS developer, you need to understand the underlying concepts of CSS that make it work and not just how to produce certain visual effects. The "block formatting context" is one of those concepts that drives how CSS affects your page without you even knowing it.
The easiest way to think about a block formatting context is as an isolated container that controls the layout of the boxes within it without regard for elements outside of it. For instance, when you float a div, it establishes a new block formatting context. Nothing inside the float will interact with anything outside the float.
But not every div establishes a new block formatting context, nor are divs the only elements that can establish them. Any block element can establish a new block formatting context if it has one of the following property/value pairs set on it:
- float: left
- float: right
- position: absolute
- display: inline-block
- display: inline-table
- display: table-cell
- display: table
- overflow: auto
- overflow: scroll
- overflow: hidden
This is all well and good, but what's the point of setting a new block formatting context? Most of the time, you don't need to worry about it, it's just something that's going on behind the scenes that you don't need to get involved with. Sometimes, however, the lack of a new context can make elements interact in undesirable ways. The primary reason for setting a new context is to keep cleared elements inside a main content div from clearing floated sidebars. We'll use this problem as a case study for how to establish new block formatting contexts and to see what their effect is on the other elements around them.
Block Formatting Contexts Adjacent to Floats
Let's look at an example of the sidebar clearing problem. Download the support files for the article by clicking on the download link at the bottom of any page. Open page1.html in Firefox. The two photos are both floated left, but because there's enough room to the right of the first one, the second photo moves up to fill in that space. To force the photos to stack on top of each other, open the page in Dreamweaver, go to Code View, locate the img rule in the style section in the head, and add clear: left to it. Preview the page in Firefox. You will see that the second photo does indeed clear the first one and stack beneath it, but now the photos also clear the left-floated sidebar (Image 1).
This is a very common problem in float-based layouts. To keep the clear property constrained to just the content of the current parent div, instead of clearing divs outside the parent as well, make the parent establish a new block formatting context. The easiest way to do this is to float the parent div as well.
Go back to Dreamweaver and locate the rule for #content in the style section in the head. Modify it to match the following rule:
padding: 1px 10px;
The content div is now also a float, with a width set to take up the space left beside the sidebar div. The left margin has been removed because the sidebar div will not overlap another float: the content div will automatically sit 200 pixels from the left because the sidebar float pushes it over. Preview the page again, and you will see that the clears only clear other elements within #content and do not clear the sidebar.
This is the easiest and most cross-browser compatible way to establish a new block formatting context. However, it won't work for all layouts. For instance, what if the content div needed to remain fluid in width? Without a width assigned, it couldn't be floated because it would just expand to 100 percent of its container and drop down beneath the sidebar. So, for fluid/liquid layouts, a different property needs to be used to set the new context.