Hi,

I am trying to create 3 equally spaced columns that I can add text to that just works. The one I have now is:

Not equally spaced
and in column 3 it loses it's vertical position when adding to it.

See this page:
http://www.reunitemysite.com/adverti...emium/banners/

I am just trying to make it look correct. Evenly spaced, and stays in position.

The code looks like this:

HTML:

<ul>
<div id="left"><li>Column 1
<li>test
<li>another test</div>

<div id="center"><li>Column 2
<li>test
<li>another test</div>

<div id="right"><li>Column 3
<li>test
<li>another test</div>
</li></ul>

CSS:

li {
text-align: left;
}


ul {
margin-left: 100px;
margin-bottom: 20px;
padding: 0px;
text-align: left;
}

#left {
    float:left;
    text-align: left;
    width:30%;
    margin-left: 0px;
    }


#center {
    width:30%;
    padding: 0px auto;
    margin: 0px auto;
    }

#right {
    float:right;
    width:30%;
    margin-top: -40px;
    margin-right: 15px;
    padding-left: -15px;
    text-align: right;
    }

Thanks again!
Brian

1 put in a proper doctype
2 - correct your code. You can have divs inside a <li> but it does have to be IN the <li> item like this:

<li><div id="blah"> content</div></li>

From the looks of it you're trying to split a list (<ul>) into three different areas with div tags. Skip the outer list and position the div tags first, then have a separate list in each div instead.

Brian for the last few weeks I've been publishing posts on setting up multi column layouts.

3 Column CSS Layout: Fixed Width And Centered

A similar post for fluid layouts will go live tomorrow morning.

I didn't specifically make the columns equal width, but you should be able to modify the code.

Basically I created 3 divs and floated each to the left. Once you have that set up you could add a list to each column and everything should display as you want.

Define "that just works".

Here's one of my simple layouts

Originally Posted by chrishirst

Define "that just works".

Here's one of my simple layouts

Ok,

I am basically looking for 3 column layout for a category page. I am not going to have many categories, but I would like to have the page ready for what ever is needed to be added to it as far as categories, so I was thinking of creating 3 columns (basically like a table) where I can just fill in the categories as needed, but instead of a table, a div to line things up. And so far, it's not going as planned.

My original code (in the first post) is the only one that works as expected, but it's not fully right because when I add to the 3rd column, it drops un-evenly, which brings me to the point, (finally)...I want to know if it's possible to make all 3 columns equal without using padding or margin adjustment because it seems when I add more columns the more it breaks.

Thanks again
Brian

You should be able to do as Steven wrote. Have three divs and put float left on them. Then add a forth empty div to clear the float. Basically:

<div class="category_container">Some categories here</div>
<div class="category_container">Some categories here</div>
<div class="category_container">Some categories here</div>
<div class="clear"></div>

.category_container {
   float:left;
   width: 33%;
   padding: 0;
   margin: 0;
   /* and just to see how they'll look */
   height: 500px;
   border: 1px solid #f00;
}
.clear {
   clear: both;
}

Check out the link Steven provided if you havn't, I thought it was rather clear and should be helpful to you.

My original code (in the first post) is the only one that works as expected, but it's not fully right because when I add to the 3rd column, it drops un-evenly, which brings me to the point, (finally)...I want to know if it's possible to make all 3 columns equal without using padding or margin adjustment because it seems when I add more columns the more it breaks.

In that case it IS a table that you SHOULD be using.
What you have described is a tabular layout, with a capital "T"

Either that or you are going to have a severe case of "divitus"

Just because you can use CSS, does not mean you have to.

A third option would be to style a definition list using the various display: table; properties but this negates the whole idea of "semantic coding". Because you are simply mimicing the very elements you should be using.