Jump to content

CSS web page centering question


Recommended Posts

Hello -


I created this web site - http://www.miguelonenterprises.com/utahtrip.htm - using lots and lots of DIV tags to specifically place my elements. Not many good pictures on that web page because of lens adapters, but I digress.


The way I have it set up right now, it's built to fill a 1280px wide screen. If I were to go to a wider screen, it doesn't center. It stays left justified, because of the way I've set up the elements.


I want to set up that web page to appear centered no matter how wide the screen.


I did some looking around to see how that could be done. It seemed as if CSS was the way to go - such sites as http://davidwalsh.name/center-website, amongst others, did provide a good example. However, applying that CSS code (I know how to do that) had no effect on my page.


Would anyone know how to center a page with such tags, or would having to resort to rebuilding the web page using tables be the way to go?


Hope to hear an answer soon.



Link to comment
Share on other sites

Lots of problems here. Some basic rules...


1. there should only be one head.

2. there should only be one body.

3. the document should begin with a DOCTYPE

4. many tags such as <center> are obsolete.

5. embedded style attributes are usually avoided especially if they are used repeatedly. Instead use a class.

6. script blocks usually appear in the head or at the bottom of the body.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style></style><script></script></head><body></body>    </html>

When you have all of that under control, the answer to your centering problem is simply to put everything in the body into a wrapper div. Then apply width 1280px and margin 0 auto to the wrapper div.

Link to comment
Share on other sites

  • 3 weeks later...

I generally do this way (as suggested by davej)

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><script></script><style>#wrapper {    width:1280px;    margin-right:auto;    margin-left:auto;}</style></head><body><div id='wrapper'><!-- all content  --></div></body>    </html>

and I think this would solve ur problem...


am I right davej?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...