> You haven't said whether you want all columns to be equal in length as > well as width! Assuming you want equal in both, then the simplest way > is to use a background image in div wrapper something like this (please > try this in your test document first and also have a simple background > image <any size> handy for "orangeback.gif": > > Basic html is as follows: > > <body> > <--------your other stuff goes above ---------> > <h1>Simple Equal Columns using a background image</h1> > <div id="divContainer"> > <div id="div1"><p>Column 1</p> </div> <!-- div1 --> > <div id="div2"><p>Column 2</p> </div> <!-- div1 --> > <div id="div3"><p>Column 3</p> </div> <!-- div1 --> > <div id="div4"><p>Column 4</p> </div> <!-- div1 --> > <div id="div5"><p>Column 5</p> </div> <!-- div1 --> > <div id="div6"><p>Column 6</p> </div> <!-- div1 --> > <br style="clear: both;" /> > </div><!-- divContainer --> > <p>Visit a CSS newsgroup for more questions to exercise your brains:
What's wrong with CSS-D? > You also need to use the following style: > <style type="text/css"> > /* inline styles aren't typically recommended, > but for this example one file is enough to get the idea across. > */ > > #divContainer {width: 800px;background: url(orangeback.gif) ;} > #div1 {width: 16.66%;float: left;color: red;} > #div2 {width: 16.66%;float: left;color: orange;} > #div3 {width: 16.67%;float: left;color: yellow;} > #div4 {width: 16.67%;float: left;color: green;} > #div5 {width: 16.67%;float: left;color: blue;} > #div6 {width: 16.67%;float: left;color: indigo;} By adding display:inline-block or another block formatting context [1] trigger, it is possible to do without the structural hack used to clear the six DIVs (<br style="clear: both;" />). As a side note, it may be better to *not* float the last column, but instead make it a block formatting context [1]. > /* everything below this is just extra styles, > the top portion is what does actual formatting. */ > > /* not the best way, but adds padding. */ > p {padding: 0 10px;} > > /* centres the container and left aligns the text */ > #divContainer {margin: 0 auto;text-align: left;} > > /* centers the rest of the text */ > body {text-align: center;} This is not to center the text but the layout in some browsers, this is why the #divContainer {} rule contains a "reset". [1] http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/