This example was based on the concept as described in Understanding Block Formatting Contexts in CSS. Basically, the center column of text is not wrapping around the sidebars because it was forced into a new block context, which makes it rectangular, using overflow: hidden;
Another cool thing you can do with this technique is contain floated items. Typically one just uses the .clearfix hack to do it, but with a little mark-up and some minor CSS, the same thing is achieved. For example,
I am
floated and taller than
the content inside the salmon
colored box. Normally that
box would only contain the
main text in the center.
I am
floated.
This is the “main” text inside the salmon colored box.
This is the main content. Felis netus quis hymenaeos eleifend magna mi et eros tristique consectetuer laoreet. Magna velit nullam senectus parturient aptent bibendum dignissim est ante. Proin ipsum sociosqu. Curae lorem primis sapien nibh condimentum cubilia suspendisse. Fames ipsum neque dictum congue magna. Curae massa dapibus sed habitant. Augue justo nulla vel dictum a vestibulum. Purus justo montes netus nam arcu. Justo ipsum dis vestibulum ve malesuada tincidunt urna nam. Massa augue nec nibh. Etiam risus porta ornare scelerisque. Neque morbi nec sociosqu gravida metus urna sodales. Ipsum nulla eget non magnis faucibus scelerisque vehicula fusce platea vestibulum.
Justo metus auctor fames dignissim nullam id senectus tempor. Metus donec vel quis sagittis tortor lacinia natoque. Fames proin urna suspendisse id. Donec etiam eros elit hymenaeos cursus. Lacus class lobortis ac eget fames ve ad. Ipsum massa ullamcorper pede. Netus purus pede tortor ad sed erat a nisi adipiscing dui neque aliquam nisi quam hymenaeos. Fusce magna sodales nonummy habitasse odio hendrerit magnis. Porta dolor. Morbi donec justo curae nascetur curae convallis habitant. Vitae curae velit sem odio nibh feugiat et elit class gravida feugiat. Lorem augue suscipit adipiscing litora ve suscipit ligula tempor metus pretium ac eni. Dolor vitae eni duis praesent est quam facilisis.
Nulla porta integer tellus elit. Vitae dolor eni porta porttitor dis augue imperdiet orci. Netus velit eni bibendum vivamus pellentesque potenti per adipiscing. Morbi risus lacus elit rutrum sociis. Metus curae. Etiam porta. Purus fames duis molestie lacinia. Ipsum class senectus massa inceptos venenatis et duis ligula suscipit phasellus. Fames vitae magnis vitae sagittis. Morbi lacus mus. Felis curae nascetur in vitae senectus. Curae justo egestas habitant eros congue vestibulum vitae arcu purus class metus amet. Lacus fusce velit tempus pellentesque blandit. Magna fames scelerisque inceptos sodales cursus augue id semper pretium euismod luctus. Vitae lorem vivamus justo cum praesent posuere. Fames proin auctor mauris ultricies.