By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,521 Members | 1,252 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,521 IT Pros & Developers. It's quick & easy.

Content does not align centered on page

shosholoza
P: 6
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 portelizabethpropertydotcom/index9.html

My intention is to have everything under the banner with same width as banner. I am using Firefox 11
Attached Images
File Type: jpg Test-Page1.jpg (87.5 KB, 234 views)
Attached Files
File Type: doc html code.doc (44.5 KB, 261 views)
Apr 4 '12 #1
Share this Question
Share on Google+
7 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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.
Apr 4 '12 #2

shosholoza
P: 6
Thx. Will get that done and then look at rest of content
Apr 5 '12 #3

shosholoza
P: 6
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%;
}
Apr 7 '12 #4

P: 93
after <body> just put <center> and complete this tag before <body>

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

</div>
</center>
</body>
Apr 16 '12 #5

shosholoza
P: 6
This has not made a difference. Page is still aligned to left.
Can be viewed at www.portelizabethproperty.com/index11.html
Apr 17 '12 #6

shosholoza
P: 6
Changed to this under <head>
margin-left:auto;
margin-right:auto;

Now looks fine. Only problem is I do not yet understand why :-)
Apr 17 '12 #7

drhowarddrfine
Expert 5K+
P: 7,435
Remove the center tags and never, ever use them again.

In your css for the body, change your margin to
Expand|Select|Wrap|Line Numbers
  1. 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.
Apr 17 '12 #8

Post your reply

Sign in to post your reply or Sign up for a free account.