Previous Message
Next Message

Centering 2 cols layout

Sent by Nick Cappadona on 17 September 2005 05:05


M Moore-Racine wrote:

>Can anyone please tell me how to center a 2-cols css layout inside the wrapper.  Somehow, the left
margin is larger than the right margin.  I would like it to be equal to the right margin, and keep
the layout centered in the wrapper. In case you need to look at the page in order to tell me, here
is the url: http://www.koumbite.com/index1
>
>Thanks for your help.
>  
>

There are several reasons why your layout is not centered on the page:

1. You have the margin set on the body to 100px all around which results
in creating a constant 100pixel buffer above and to the left of the
content no matter how large or small the browser window is sized.

2. You have the min-width of the body set to 840px which results in the
centering being offset to the right by an amount of 840px - (the width
of the two columns).  This is most apparent anytime the browser window
is contracted past 840 pixels and a constant margin appears on the left.

3. Although you have defined a #wrapper selector, you have not actually
placed it on your page.

4. If the #wrapper selector was placed on the page as is, it wouldn't
provide you with an auto-centered layout because the margin is set to
0px all around.  A common technique to achieve an auto-centered layout
requires that the left and right margin to be set to "auto".

5. Your #c1 selector is absolutely positioned. Even if all of the above
were corrected, your attempt to auto-center the layout would be defeated
here.

6. Your #c2 selector has the a asbolute positioning property (top: 0px;)
and a large left margin (390px), both of which defeat an auto-centered
layout.

---------------
Taking the above into consideration, I have made some modifications to
your css and one small change to your page (adding the #wrapper selector).

You can view the updated page here:
http://demo.phiberstudios.com/koumbite

and updated css here:
http://demo.phiberstudios.com/koumbite/touch3.css

I have included in-line commenting in both files.

I noticed that you're utilizing javascript to equalize the two column
lengths.  I strongly recommend that you review Dan Cederholm's Faux
Columns article from A List Apart for an alternative method that will
improve the accessibility of your site.  You can view the article on
ALA's site at the following address:
http://www.alistapart.com/articles/fauxcolumns

Please note that this isn't the only way nor the best way to achieve
your results.  It's just one method that I have used on several
occasions and has proven reliable for me.

If anyone has a contrasting view, please chime in.

Take care.
- Nick

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: