Now that we have dissected the makeup of the horizontal properties of the element box, I want to give a few pointers about using this knowledge for creating workable layout.
When Nested Boxes Are Wider Than The Containing Block
On the previous pages I gave several examples where the total width of the element box ended up being hypothetically wider than it's containing block. I hinted that this could cause problems. Let's take a look at what those problems are and how to avoid them.
In this scenario we are setting up a new web page and we want the content area to be 600px wide. You did something similar when you set up your Home page for this course. In this case I'm going to create a DIV with the class of
"wrapper".
I have added a paragraph just to keep the wrapper DIV container open.
CSS & Markup
.wrapper {
width:600px;
color:#000;
background-color:#DDD;
}
<body>
<div class="wrapper">
<p> The "wrapper" DIV is 600 pixels wide.</p>
</div>
</body>
Rendered Example
The "wrapper" DIV is 600 pixels wide.
Now we will insert a
"headingBox"
DIV that will fill the total width of the wrapper DIV. In this demo I am going
to specify that the headingBox DIV should also have a width of
600px to match the width of the wrapper DIV.
CSS & Markup
.wrapper {
width:600px;
color:#000;
background-color:#DDD;
}
#headingBox {
width:600px;
color:#000;
background-color:#CFF;
}
<body>
<div class="wrapper">
<div id="headingBox"> The content width of this "headingBox"
DIV is 600 pixels wide. Everything works OK but it is
a little bit plain and cramped.
</div>
<p> The "wrapper" DIV is 600 pixels wide.</p>
</div>
</body>
Rendered Example
The "wrapper" DIV is 600 pixels wide.
For the moment everything behaves well.
Now I'm going to add some borders, padding or margins to dress it up a bit. The HTML stays the same from here on so I won't show it again.
CSS
.wrapper {
width:600px;
color:#000;
background-color:#DDD;
}
#headingBox {
width:600px;
color:#000;
background-color:#CFF;
border: 2px solid #399;
padding: 10px;
margin: 10px;
}
Rendered Example
The "wrapper" DIV is 600 pixels wide.
As you can see, when the total width of the headingBox DIV exceeds the content width of its containing block, the results are not exactly what I had in mind. In modern browsers, boxes that exceed the content width of their containing block will 'poke' through the side of the containing block ...except Internet Explorer. More on that a little later.
Using The Width Property Wisely
The easiest way to alleviate the problem illustrated above is to simply not specify a content width for the nested
headingBox
DIV. The containing block - the wrapper DIV in this case - already has a content width of 600 pixels. CSS specifications dictate that when we insert an unstyled nested box into a containing block, that nested box will automatically expand to the width of the containing block's content width. In the example below, all I did was remove the headingBox width property from the CSS and it now conforms to the width of its containing block.
CSS
.wrapper {
width:600px;
color:#000;
background-color:#DDD;
}
#headingBox {
color:#000;
background-color:#CFF;
border: 2px solid #399;
padding: 10px;
margin: 10px;
}
Rendered Example
width but still has 2 pixel borders,
10 pixel padding and 10 pixel margins all around. It automatically fills the width of its containing block. The margins, borders, and padding retain their specified sizes but the content of this
"headingBox"
DIV becomes narrower in order to fit into the containing block. The "wrapper" DIV is 600 pixels wide.
The points of this demonstration are threefold:
- An element box will automatically fill the content width of its containing block unless the element box, itself, has a specified width property.
- In general it works best to separate 'width' from 'content'. By this I mean that it is best to apply the
widthproperty to a few containing blocks and then style the element boxes inside the containing block with margins, borders, and padding - but avoid applying thewidthproperty to the nested boxes without good reason. - If you must apply the
widthproperty to a nested element box which occurs inside a width-specific containing block, be sure to calculate the width of the entire nested element box ...
content width + padding + borders + margins
... to be sure that the total is equal to or less than the content width of the containing block.
A bonus aspect of following the practice of using containing blocks to govern the widths of its nested element boxes is that it prevents certain problems with older non-compliant browsers at the same time. I'll discuss a few of these browser details shortly.
There are occasions where creating an extra containing block for the sole purpose of applying the width property can solve difficult width-related problems. However, be sure it is absolutely necessary to follow this path before you clutter your markup with unnecessary container DIVs.