Jump to content


Photo

How do I center my page?


  • Please log in to reply
4 replies to this topic

#1 TheAppleNewsreel

TheAppleNewsreel

    New member

  • New Members
  • 3 posts

Posted 06 March 2011 - 07:39 PM

I previewed my page in my browser, and found that the whole thing is on the left side of the page. How do I center it like the killersites page, and most other pages? Attached is a screenshot to give you an idea of what I'm talking about. Please note the large white area composing the right side of the screen.
  • 0

#2 Eddie

Eddie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,632 posts
  • LocationTexas

Posted 06 March 2011 - 08:00 PM

Wrap a div around the whole thing. The way you do that is apply the open div just after the open body tag and the a closed div just before the closing body tag.

<body>
<div style="margin: 0 auto; width: 900px;"> Note: set your width to whatever size your framework is.

</div>
</body>
  • 0

#3 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,727 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 06 March 2011 - 08:02 PM

http://www.csstutori...-page-with-css/
  • 0

#4 grabenair

grabenair

    Advanced Member

  • Member
  • PipPipPipPip
  • 361 posts
  • LocationIowa

Posted 07 March 2011 - 05:08 AM

This is how I center my page:

#wrapper {
width: 960px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
}
I put all of my content links,main content ect. inside of the wripper div and use this css to center it in the browser window. The centering part is the margin-right: auto; margin-left: auto; I hope this helps.
  • 0
Standards will change. But your website needs to remain in serving its audience.
My Portfolio site

#5 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 08 March 2011 - 01:49 AM

If you have any divs or other elements with position: absolute you will almost certainly need to add position: relative to the wrap div as position: absolute elements will be unaffected unless you do add it:-
<body>
<div style="position: relative; margin: 0 auto; width: 900px;"> 
Note: set your width to whatever size your framework is.
</div>
</body> 

  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users