We help IT Professionals succeed at work.

Centering content

brettr
brettr asked
on
How can I get content here to center: http://www.cygen.com/oldtimeypb/?

Also, is there a way to get the background to not consume the entire page?  I may want to use another background that shows through on the edges.
Comment
Watch Question

Put everything inside of a table.
<table style="width:100%">
<tr align="center">
<td>
</td>
</tr>
</table>
Top Expert 2011

Commented:
Rather than adding tables to your site...

1- add this above your "div id=main" (and add a closing tag at the bottom of your HTML)
<div id="wrapper" style="background-image: url('images/background.jpg');margin:0 auto;width:800px;">

Open in new window


2- remove the style settings you have on your <body> tag. (Basically, removing the background image from the body and placing it on the wrapper - that way if you want to use a different page-level background image elsewhere, you can)
change:
<body style="background-image: url(images/background.jpg);width:600px;height:300px;">

Open in new window

to
<body>

Open in new window


If you want to add a height:300px to the "wrapper" div, feel free to do so. ;o)

Author

Commented:
@nap0leon:

Thanks.  Can you check the site now?  Is there a way to center the inner content?
Top Expert 2011
Commented:
Add another div inside your wrapper (and close it at the bottom)
<div id="main" style="margin:0 auto;width:400px">

Open in new window


Body - defines the entire area of your web browser content.  Right now, you want this to be empty.  Later you may add a background image, or a color, etc.

Wrapper - the container for all your stuff.  To center it, use "style=margin:0 auto;width:600px;"

Main - this is your actual content.  Since you want it centered and 400px wide, use "style=margin:0 auto;width:400px;"

Side-note... since you are building out this site, you should invest some time in placing an id on all your divs so that you can move the style stuff into a <style> tag later for easy re-use.

Attached HTML shows what your current page would look like with the changes above and stuff moved into a <style> section.
oldTyme.html

Author

Commented:
Nice.  Thanks.