LAYOUTS - CSS: Professional Techniques for Modern Layout - page 112

114 Figure 4-8: Using overflow to visually contain fl oated descendants.

Yes, that works. Yes, there's a reason. No, we're not going to dig through it here. (But if you're
curious, read section 10.6.7 of CSS 2.1.) If you want to be sure you sidestep some glitches in
older versions of IE, add an explicit width to your overflow ed element:

div#main { border : 2px dashed gray ; background : #9AC ;
overflow : auto ; width : 100% ;}

h e width value doesn't have to be exactly 100% : It can be anything that isn't auto . And, as
I say, it only has to be there to keep older versions of IE from soiling themselves. If you don't
care about older versions of IE, then you can drop the width declaration entirely.

h e advantage with this approach is that it leaves the containing element ( div#main ) in the
normal l ow of the document. h at means that it will keep any following content below its
bottom edge, even if it's narrower than the following content. h is allows it to keep following
content from l owing next to your columns. It will also default to be as wide as its container.
h at way you can say things like width: 100% and have the container stretch out like any
normal-l ow element should.

Note, however, that since our example gives div#main side borders, declaring width:
100% means that div#main will actually stick out of its containing element by four pixels.
Using width: auto will prevent that—the whole element box, including borders, will i t
inside its container—but then you might get old-IE problems.