> 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 [[email protected]]
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/
