CSS Instance tutorial: Non-floating area setting width

Some time ago I was doing the theme of green Gaint, I found a problem in the layout of floating. Let me explain, as shown in the following illustration:

We assume that there is a container a in which two containers B and c,b set the height and width, and float to the left, C does not float, it will surround the B area, which is typical of the floating effect, no problem.

However, when the C container is set to a width, and the width of B and C is less than the effect after a container, this is true in Firefox and IE8:

The performance in IE6 and IE7 is this:

Here, let's look at the B area as the main content area of the Web page, c area as a sidebar, to achieve B in the left, C in the right, B and C to retain a certain space, we also want to give C set the Margin-left property, when adding the property on the left margin, IE and Firefox are in the same layout.

Of course, you can not set the width of the C area, just add the left margin to achieve the desired layout effect, but sometimes we need to add width to the C region, you need to understand that Firefox, IE8 and IE6, IE7 for the layout of the performance is different.