centering your page in css

by 4 replies
5
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 #
#website design #centering #css #page
  • 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.
    • [1] reply
    • 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
  • 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.
    • [1] reply
    • 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.
      • [ 1 ] Thanks
Join the discussion

Next Topics on Trending Feed

  • 5

    centering your page in css

    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: