How to Center 3-Columns With Adjustable Width?

Hi,

After Googling and experimenting for several hours, I give up! I've found answers to all my programming problems except this one.

Most of my pages use 3-columns. I have 2 types of 3-column pages:
1. Lists (www.ComparingVitamins.com and the top horizontal menu.)
2. Products (www.comparingvitamins.com/garden-of-life-products/

Here's the problem: Notice how the home page (and all other top menu pages except the widest: "Free Shipping") look bad because they're aligned left instead of centered. Do you know how to center the 3-columns on every page?

Ideally, I'd like the whole div width and columns' widths to adjust to the content on each page. Is this realistic, or am I dreaming?

Thank you,

Greg

Here's the CSS:

#listmast {
clear: both;
margin-left: auto;
margin-right: auto;
width: auto;
}
.listcontent {
padding-top: 20px;
padding-left: 10px;
padding-bottom: 25px;
float: left;
width: 32%;

And here's the HTML:

<div id="listmast">
<div class="listcontent">Content</div>
<div class="listcontent">Content</div>
<div class="listcontent">Content</div>
</div>

 

I see content/layout/cols/navigation are centered.

 

Hi,

You are quite correct in that applying automatic left and right margins will center a block element, however this only works if the element has a defined width (not automatic width)! This can be of any unit e.g % or px etc...

Also on another note to center an inline element (e.g img, span) you just add text-align:center; to it's parent.

DIV widths already adjust to accomodate their content, hence automatic width by default, the only reason they don't is if you apply width constraints.

But I agree with the above poster I can't actually see the problem when I visit the site!

 

wd_2k6 and radiant_luv,

Thank you for your replies. For examples of the non-centered columns, please see the home page and most others in the top menu.

Most of my pages have slightly different widths. Hence the problem in defining one width for every page. (Only the Free Shipping page has a much wider width, so maybe I should just use different code for that page alone?)

I'm not too advanced, so if you can tell me specifically how to fix it, I'd really appreciate it.

Thank you again,

Greg

 

What browser are you seeing the error in? Everything looks fine in Chrome.

 

I'm using Firefox 3.6.9 and IE 8.