Re: using css for centering

Wow,

CSS may be the next best thing but for a simple thing that was easy to 
implement before, this has turned out to be quite a complex little problem! 
Tables are starting to look real good to me right now...

But, I think the solution below seems to be the most reliable.

Thanks for everyone's response.

Nate





At 6/4/2002 09:19 AM, Martin Clifford wrote:
>Use DHTML to accomplish it, if you really want it done that way.  I'll let 
>you in on the things you'll need to find out to do it:
>
>1.  You need to absolutely position your ENTIRE content within a div, at 0 
>x 0.
>2.  Find the width of the LIVE area of the page.
>3.  Find the width of the DIV that is holding your content.
>4.  Calculattions:
>
>Example: Window 200W, Object 100W
>
>Subtract Object from Window, then subtract half of Object from 
>Window.  This gives you 50px.  Thus, the object is 50px from the left, 
>50px from the right, spanning 50-150px of the window space.  Once you have 
>that function, simply call it onload.
>
>I'm sure you'll be able to figure the implementation out, but if not, just 
>drop me a line and I'll be happy to help out.
>
> >>> Andrew McFarland <aamcf(at)aamcf.co.uk> 06/04/02 08:16AM >>>
>At 11:26 03/06/02 -0400, Nate Harel wrote:
><snip/>
> >I want to produce a page that is entirely centered on the page. Using
> >tables, this is easy. I simply make a table with a particular width and
> >center it. Then no matter the size of the screen, the contents are centered.
> >
> >How do I do the same with CSS?
>
>With grave difficulty.
>
>Centering block level elements should be easy with CSS, but browser
>implementations are sometimes iffy. What you want to do is set the left and
>right margins to the same size, which can be done in various ways.
>
>If you want, say, a paragraph to be 50% of the width or the page and
>horizontally centered you could use this CSS:
>
>p {
>          margin-left: 25%;
>          margin-right: 25%;
>}
>
>If you wanted to give the block level element a width in pixels then things
>get messy. You should be able to do this:
>
>p {
>          margin-left: auto;
>          margin-right: auto;
>          width: 500px;
>}
>
>In theory, the browser would set the width of the element to 500px, and
>then divide up the remaining space equally between the left and right
>margins. In practice this is not well supported, with the left margin being
>set to 0 in many browsers. Fortunately though newer browsers do support this.
>
>One thing you shouldn't do is use text-align: center. This aligns the
>inline elements with the center of their inline boxes. This is a tricky
>thing to describe, but have a look at http://aamcf.co.uk/temp/text-align to
>see what I mean (look at the source code too).
>
>Andrew
>
>--
>http://aamcf.co.uk/


                 ----------------------------------
                             Nate Harel
                         NetTech Services
                           56 Pickering Street
                   Needham, MA  02492-3198
                       Tel:  1-781-559-8176
                   Toll Free: 1-877-567-8936
                      FAX:  1-877-567-8936
                 Email:  nharel(at)nettech-services.net
                      www.nettech-services.net
                      www.nettech-backup.com
                 ----------------------------------

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA