Widening A Box

We'll begin with the example from the previous lesson. Lets resize the central box. Resizing a box's width is a common adjustment to a CSS-P layout. The problem is that when we resize one box, everything else gets thrown off a bit.

To widen the box, we'll need to add to its "width:". Here's the code for the original box with the original "width: 40%;":

#centerbox{
position: absolute;
top: 10px;
left: 30%;
width: 40%;
height: 500px;
border: solid 2px #ff0000;
}

Lets add, say, 15% to the width of this box to bring it up to a total width of 55%:

#centerbox{
position: absolute;
top: 10px;
left: 30%;
width: 55%;
height: 500px;
border: solid 2px #ff0000;
}

This widens the box, but causes a problem. Here's the problem.

Overlap

You notice that the new page has an overlap. The central box has expanded under the box to the right. This is a fine example of why borders are more useful in debugging CSS-P than using a background color. If we used a background color making each box a colored block, the boxes would only appear to butt up against each other. In fact, we have overlapping.

This often occurs when some fixed-size content, like an image or a long string with no spaces like an URL, is placed in a box that is not wide enough to accept it. The content will "bloat" the box, causing it to expand over or under its neighbor. We need to widen the box enough to accept the fixed-size content.

Since we have a set a value for "left:", the box will expand to the right. After resizing the box, we need to pull it further to the left and out from under its neighbor.

The "Half-Back" Technique

The "Half-Back" technique is the most used method for calculating how far back to the left to move the box so it will again be centered between the two outside boxes. We added 15% width to the box. If we pull the box back to the left one-half of that 15% (7.5%), it will be re-centered:

#centerbox{
position: absolute;
top: 10px;
left: 22.5%;
width: 55%;
height: 500px;
border: solid 2px #ff0000;
}

In the above code, we've subtracted 7.5% - half of the 15% added to the width - from the "left:" property of the box. The "left:" was originally 30%. Subtracting 7.5% leaves us with 22.5%. This re-centers the box as in this page.

It's important to note that you can use decimal percentages in CSS-P, but after 1/100th of a percent, there's no noticeable change. One-tenth of a percent is as low as you're ever apt to need to go.

The IE Glitch

If you're viewing the updated page in Microsoft Internet Explorer, it appears slightly to the left of perfectly centered. Viewing in Opera and Netscape will show a perfectly centered box.

The reason for this is a persistent right margin in IE that cannot be removed with CSS. Try making a box with "width: 100%" and the problem will become tragically clear.

If you adjust the "left:" value just a few tenths of a percent to 23%, it will be centered in IE, but off in Netscape and Opera.

There are workarounds for this. The most professional is to make two separate stylesheets. One for IE and one for everyone else. JavaScript can be used to detect which browser a viewer is using and load the appropriate stylesheet.

For now, just live with it. Always remember that the vast majority of viewers, for reasons known only to them, use IE. If you have to go one way or the other, side with IE.

Summary & Exercises

Expect to have to tweak your layout after the initial coding. Do this before you add content. It makes things easier to find and reduces the number of factors that could be screwing up your layout.

The most common adjustment is to make one or more boxes wider and then re-centering them in the remaining whitespace. Do this one box at a time using the following procedure:

1) Widen the box by adding to its "width:".

2) Subtract one-half of the added "width:" from the box's "left:" value. If you added 10% to "width:", you'd subtract 5% from "left:"

3) Tweak as needed for IE's right margin glitch.

This same process works in reverse when you make a box narrower by reducing it's "width:" value. Reduce the "width:" and then add half of the removed "width:" to the "left:" value.

Try resizing the boxes until the borders just meet without any overlap. You should be able to see all borders. You will be using fractional percentages here more than likely. It gets very percise. Good practice.

Don't be afraid to play around with any of the CSS values to get things just like you want it. Remember that once you get this right, you can apply it to the whole site. it only has to be done once. Take your time and fiddle around.

To Next Advanced CSS Lesson

Back To Advanced CSS Index