5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

centering your page in css

by The Copy Warriors
4 replies
  • WEB DESIGN
    • |
Okay, so, I've been more or less driving myself up the wall trying to get my body, header and footer centered in the middle of the browser. I have read numerous tutorials on this subject, and none of their methods are working for me. I am using IE8 and typing up my html and css files in notepad.

Methods I have read about (and attempted) include:

1. Setting margin for the div to "auto" or "0 auto" in the css document

2. Setting margin-left and margin-right to "auto" or "0 auto" in the css document

3. <div align="center"> in the html document. if I do <div align="center"> for the container, it centers the header, body and footer, but i can't center individual pieces by using this method.


Note: I'm very new to CSS and only know how to use divs that start with #
#centering #css #page
  • Profile picture of the author xtrapunch
    Use the following for all main divs:

    margin: 0 auto;

    Make sure that you do not set "float: left" for any of them. You can alternatively create a main div wrap that contains all your elements. Set the main div in middle using the above margin attributes.
    Signature
    >> Web Design, Wordpress & SEO - XtraPunch.com <<
    Web Design & SEO Agency | Serving World Wide from New Delhi, India

    {{ DiscussionBoard.errors[4659403].message }}
    • Profile picture of the author izorgor
      Put following in css file:

      body{width:960px;margin:auto}

      Tis should work, but it depends of your HTML and CSS structure.

      if u fail, PM me and i will do that for u
      {{ DiscussionBoard.errors[4659495].message }}
  • Profile picture of the author Rankx
    All of what was said before works. It is unfortunate that the HTML <center> tag is becoming obsolete. It works better than any css code when it comes to centering.
    Signature
    Affordable Web Developer at your service
    Expert at Joomla and Wordpress
    {{ DiscussionBoard.errors[4661181].message }}
    • Profile picture of the author SteveJohnson
      Originally Posted by Rankx View Post

      All of what was said before works. It is unfortunate that the HTML <center> tag is becoming obsolete. It works better than any css code when it comes to centering.
      Horsepucky.

      Centering a block-level container is simple: set the left and right margins to 'auto' and specify a width.

      Done.

      The easiest way to constrain multiple containers - header, body, footer - is to 'wrap' them in another container. You can then set the width to the 'wrap' and the inner elements will be constrained. Like so:

      <div id="wrap">
      <div id="header">header</div>
      <div id="body">body</div>
      <div id="footer>footer</div>
      </div>

      Style the wrapper:
      #wrap { margin: 0 auto; width: 80%; }

      Now you'll have a page where your header, body, and footer are all 80% of the viewport width, centered between the edges of the browser window. You can use any accepted value for the width: pixels, percentage, points, ems, whatever.
      Signature

      The 2nd Amendment, 1789 - The Original Homeland Security.

      Gun control means never having to say, "I missed you."

      {{ DiscussionBoard.errors[4661506].message }}

Trending Topics