Goodnight Art & Design
For all your basic design layouts in print & web design as well as much more!

Centering of Page Sections Tutorial (GL CS2)

Below are 3 separate identical table sections using sightly different methods in the CSS to try to get a page section to center on a browser page. Layout is done using GoLive CS2. The tables and notes are set for 100% width. Notes for sections are at top of each section and describe what part of the layout is different, etc.



Section 1 (This section is in a division with an id=wrapper2)

Note: For this section as well as this page header, the header, section 1 notes & table stays horizontally centered on the page.

Contents of external basic_centertest.css

body {
   text-align: center
   }

#wrapper {
   text-align: left;
   margin: auto;
   width: 760px
   }

#wrapper2 { text-align: left; width: 760px; margin: auto; }

  • Attributes for body and #wrapper were pasted into source of CSS editor and are on separate lines






  • Attributes of #wrapper2 were added using the GUI in the CSS Editor and not by pasting into source.
  • The code can be pasted in as long as it is on one line, spaced and marked up properly.



Section 2 (This section is just placed on the page)

Note: This section of the page is done by just placing contents on the page body. The body css is not appling so the content stays to the left side of the page and the table expands to 100% of the page size instead of stopping at 760px as called for in the #wrapper division attributes. So the page content does not see any of the css

Contents of external basic_centertest.css

body {
   text-align: center
   }

#wrapper {
   text-align: left;
   margin: auto;
   width: 760px
   }
#wrapper2 { text-align: left; width: 760px; margin: auto; }

  • Attributes for body and #wrapper were pasted into source of CSS editor and are on separate lines






  • Attributes of #wrapper2 were added using the GUI in the CSS Editor and not by pasting into source.
  • The code can be pasted in as long as it is on one line, spaced and marked up properly.



Section 3 (This section does use a division with id="wrapper" but that css does not work)

Note: This section of the page is done by placing the table inside of a division <div id="wrapper"> on the page body. The body css is not appling so the content stays to the left side of the page and the table expands to 100% of the page size instead of stopping at 760px as called for in the #wrapper division attributes. For some reason GL CS2 is not recognizing the external CSS of #wrapper with the code on separate lines and the css is not being applied to this section even though the division has the correct id="wrapper".

Contents of external basic_centertest.css

body {
   text-align: center
   }

#wrapper {
   text-align: left;
   margin: auto;
   width: 760px
   }
#wrapper2 { text-align: left; width: 760px; margin: auto; }

  • Attributes for body and #wrapper were pasted into source of CSS editor and are on separate lines






  • Attributes of #wrapper2 were added using the GUI in the CSS Editor and not by pasting into source.
  • The code can be pasted in as long as it is on one line, spaced and marked up properly.



Site content & Page layout © 2005 Goodnight Art & Design , All rights reserved.
No part of this site may be copied or reproduced without our Written Permission
All logos and trademarks on this site are property of respective owner!