Improve company productivity with a Business Account.Sign Up

x
?
Solved

Center Web Page Not Working

Posted on 2011-02-12
5
Medium Priority
?
423 Views
Last Modified: 2012-05-11
An update page I am working on  is at http://www.dciscancer.com/index2011.php

In Code View you can see:
<div id="Centered">
at the top of the body.
I close it just above  </body>

The tag is in the linked .css file a reads as follows:
Centered {
      position: relative;
      margin-left: 100px;
      margin-right: auto;
      margin-top: 0;
      margin-bottom: 0;
      width: 1024 px;
}

I use this many other websites to center the page on the browser screen.
It works at http://www.thebicyclesite.com and http://www.liccsc.org, for example.
Here it is not doing anything and I cannot figure out why.
0
Comment
Question by:glenn_1984
  • 2
  • 2
5 Comments
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 800 total points
ID: 34879494
Add to your css this code instead Centered:
#Centered {
    margin: 0 auto;
    position: relative;
    width: 900px;
}

Open in new window

0
 
LVL 20

Accepted Solution

by:
thehagman earned 1200 total points
ID: 34879676
So before you merely edit the margin property, take a close look at SSupreme's complete CSS code: You used "Centered" instead of "#Centered", which would apply to a (ficticious) tag <Centered>...</Centered>
0
 
LVL 16

Author Comment

by:glenn_1984
ID: 34879896
I figured it was a stupid error.

I added the # to Centered...no idea why, in a long .css file I did not notice that :)

The margin: 0 auto;  has no effect.  I tested with and without.

Thanks.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34880365
If you tested it without the width, then there is no place for margins to exist, except 0 margins. Please follow the instruction next time.
0
 
LVL 16

Author Comment

by:glenn_1984
ID: 34880527
I DID  use the width. What I did not use was  margin: 0 auto;

It is now running live at http://www.dciscancer.com.
0

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

579 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question