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: <a
href="news://forums.projectseven.com/css"; title="Projectseven.com">CSS
newsgroup</a>!</p>
</body>
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;}
/* 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;}
</style>
--- On Sat, 6/5/10, Stuart King <[email protected]> wrote:
> I am trying to make 6 equal columns
> underneath the img toc_header. Is there
> a way I can make the equal, and horizontal?
>
> Would it be better if I made a ul?
>
> http://www.flatsnapavalley.com/pages/menu.html
>
______________________________________________________________________
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/
