Sent by David Pratt on 28 December 2004 00:12
I got this to work by adding another div after the threeColContainer
div to wrap the three column divs. Can anyone explain why this is
necessary?
Thank you
David
On Monday, December 27, 2004, at 07:20 PM, David Pratt wrote:
> The following works on Safari, Opera and IE but does not render the
> three columns in Mozilla, Netscape, Firefox. Can someone tell me why
> not? I want the floats to be contained so that I can clear them
> properly (so the reason for making the first div a float left). If I
> remove the float: left on the .threeColContainer, it will render but
> the floats are no longer contained.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <title>Untitled</title>
> <style>
> .threeColContainer {
> float: left;
> }
> .threeColOne {
> width: 32%;
> float: left;
> padding-right: 2%;
> }
> .threeColTwo {
> width: 32%;
> float: left;
> padding-right: 2%;
> }
> .threeColThree {
> width: 31%;
> float: left;
> }
> </style>
> </head>
> <body>
> <h1>Example Three Col</h1>
> <div class="threeColContainer">
> <div class="threeColOne">
> <h4> Column 1 </h4>
> <p>
> Mollis neglegentur et quo, ad principes dissentias efficiantur
> nec. Et autem constituto interesset usu, vitae aeterno appareat sit
> no. Usu mundi dolores te, invidunt lucilius signiferumque sed ne, in
> duo suscipit gubergren.
> </p>
> </div>
> <div class="threeColTwo">
> <h4> Column 2 </h4>
> <p>
> Lorem ipsum natum volutpat expetendis ea eos. Te posse clita
> accommodare vix.
> </p>
> </div>
> <div class="threeColThree">
> <h4> Column 3 </h4>
> <p>
> Sed ea saepe putant, mei ne hinc error. His probatus adolescens
> ex, an reque blandit eum. Virtute ceteros cu ius, sed in facer mollis,
> ad quem labores civibus has.
> </p>
> </div>
> </div>
> </body>
> </html>
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
