Content does not align centered on page

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • shosholoza
    New Member
    • Apr 2012
    • 6
    #1

    Content does not align centered on page

    I switched from tables to using Divs and now cannot get the content to align under the banner properly in the center of the page.

    I have attached the code as well as screen image.

    View page here portelizabethpr opertydotcom/index9.html

    My intention is to have everything under the banner with same width as banner. I am using Firefox 11
    Attached Files
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      You can set the width of the body equal to the size of that banner image. Then, to center everything, set the body to 'margin:0 auto'.

      Unfortunately, the rest of the markup is not really aligned to doing it that way and you'll see some shifting of elements.

        Comment

        • shosholoza
          New Member
          • Apr 2012
          • 6
          #3
          Thx. Will get that done and then look at rest of content

            Comment

            • shosholoza
              New Member
              • Apr 2012
              • 6
              #4
              I did as you recommended and think I grasp the principle - the other divs must be % of something in order to line up.
              The alignment now seems fine - but the content is still not centered but is sitting on the left.
              This is what code looks like now
              html, body {
              margin: 0; auto;
              padding: 0;
              width: 971px;
              height: 100%;
              }
              Last edited by shosholoza; Apr 7 '12, 07:13 PM. Reason: Ommitted code

                Comment

                • Bharat383
                  New Member
                  • Aug 2011
                  • 93
                  #5
                  after <body> just put <center> and complete this tag before <body>

                  like this :::
                  <body>
                  <center>
                  <div>

                  </div>
                  </center>
                  </body>

                    Comment

                    • shosholoza
                      New Member
                      • Apr 2012
                      • 6
                      #6
                      This has not made a difference. Page is still aligned to left.
                      Can be viewed at www.portelizabethproperty.com/index11.html
                      Last edited by shosholoza; Apr 17 '12, 06:39 PM. Reason: Addition

                        Comment

                        • shosholoza
                          New Member
                          • Apr 2012
                          • 6
                          #7
                          Changed to this under <head>
                          margin-left:auto;
                          margin-right:auto;

                          Now looks fine. Only problem is I do not yet understand why :-)

                            Comment

                            • drhowarddrfine
                              Recognized Expert Expert
                              • Sep 2006
                              • 7434
                              #8
                              Remove the center tags and never, ever use them again.

                              In your css for the body, change your margin to
                              Code:
                              margin:0 auto;
                              This will automatically adjust your margin to fit the width of the screen compared to the width of your body element which is acting as a container for its contents. The zero will set the margin at the top and bottom to zero.

                                Comment

                                Previous template Next
                                Working...