Start: Create a container with 2 floating divs, place border on main container, and backgrounds on inners for visibility.
As we can see here, the border container does not expand to fill the floats. This is intentional. Check the links at the bottom to see why.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
Some extra text for the middle
First Step: Here we add an overflow: hidden to the container to take advantage of an obscure reference in the CSS spec. This works perfectly in Firefox, and Safari, but IE still has problems.
.container { overflow: hidden; }
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
Some extra text for the middle
Final Step: To fix this issue in IE, we add a width attribute to the container. This is an odd feature of IE that we can take advantage of here.
.container { overflow: hidden; width: 100%; }
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
This is some text.
Some extra text for the middle
Links: