troubleshooting Question

How to Align the whole web page to center ?

Avatar of wilsonlam21st
wilsonlam21st asked on
Web Development
23 Comments1 Solution1137 ViewsLast Modified:
I got a free template with code and css below.  However, I don't know how to align the whole web page to the center of the browser.  As the current web page is left justified.  I tried to edit the tag <div...> to <div align="center">.  However, it only align the text not the whole web page.  May I know how can I fix it ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<title>Online Business</title>
<link rel="stylesheet" type="text/css" href="onlinebusiness.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="online business, trading, money" />

<div id="container"> <!-- container div contains all the content divs -->

<div id="topbar"><!-- Top bar -->
<a href=""><img src="images/russian.gif" alt="russian" class="languageimg" title="Russian" /></a>
<a href=""><img src="images/french.gif" alt="french" class="languageimg" title="French" /></a>
<a href=""><img src="images/english.gif" alt="english" class="languageimg" title="English" /></a>

<div id="hdr"><!-- header -->
<h1><a href="index.html"><span>Online</span>Business</a></h1>
                  <form class="login" method="post" action="?">
                  <p><input type="text" name="login" class="login" /> <input type="submit" value="login" class="loginbttn" /></p>
</div> <!-- End of header -->

<div id="navbar"><!-- navbar -->
      <ul id="nav">
            <li><a href=""><span>> </span>About Us</a></li>
            <li><a href=""><span>> </span>Products</a></li>
            <li><a href=""><span>> </span>Download</a></li>
            <li><a href=""><span>> </span>Our Partners</a></li>
            <li><a href=""><span>> </span>Contact Us</a></li>
</div> <!-- End of navbar -->

<div id="siteimg"><p>Want to make the most of your savings?<br />We can help your money grow.</p></div>

<div id="lftcol">
<h2>Top Links</h2>

<h3>Open Source Web Design</h3>
<p class="updated">30th APRIL 2006</p>
<p>Hundreds of free web templates available for download.<br />
<a href="">Read More > </a></p>

<p class="updated">29th APRIL 2006</p>
<p>Free photography site featuring hundreds of excellent free photographs.<br />
<a href="">Read More > </a></p>

<h3>Web &amp; Graphic Design</h3>
<p class="updated">28th APRIL 2006</p>
<p>Visit the site of the author of this template and see his Graphics &amp; Web Design work<br />
<a href="">Read More > </a></p>

<h3>Oil Prices Surge in April</h3>
<p class="updated">21st APRIL 2006</p>
<p>Oil prices hit a record high in April $72 per barrel.<br />
<a href="">Read More > </a></p>


<div id="rgtcol">
<h2>Latest News</h2>

<h3>New Design</h3>
<p class="updated">30th APRIL 2006</p>
You are viewing the latest design by <acronym title="davereederdesign">drd</acronym>. <br />
I created this design because a lot of people are seeking a small business design that looks fresh yet professional.  To view more of my work including other free templates, websites &amp; graphic design projects please visit my <a href="">my website</a>. <br />
The design is:</p>

<li>Written in XHTML 1.0 Strict</li>
<li>CSS based</li>
<li>Compatible with all tested browsers, including Firefox, Internet Explorer 5.5 &amp; 6.0, Opera, &amp; Safari</li>
<li>Designed to be fresh and original</li>
<li>Absolutely free to use!</li>

<h3>Good Investments in the Stock Market</h3>
<p class="updated">25th APRIL 2006</p>

<img src="images/glasses.jpg" alt="" class="rightimg" />
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eget quam id quam molestie aliquam. Etiam viverra. Donec laoreet, pede eget elementum consectetuer, odio lectus viverra arcu, ac venenatis ipsum quam quis arcu. Mauris sodales nonummy purus. Pellentesque turpis. In hac habitasse platea dictumst. Integer congue auctor nisl. Donec ullamcorper. Curabitur iaculis diam a neque. Curabitur eu velit. Donec nec tortor. Proin hendrerit sem at dolor. Aliquam erat volutpat.
Pellentesque mollis, odio eget faucibus luctus, purus erat sodales magna, in feugiat urna ante nec erat. Donec nibh. Aliquam ullamcorper. Fusce pulvinar sodales enim. Nullam facilisis leo eget leo. Nulla enim risus, vulputate non, dignissim vel, tempor in, elit. Vivamus et enim. Curabitur nonummy vehicula metus. Nulla scelerisque massa a nisi. Vestibulum consectetuer lobortis sapien. Fusce fermentum odio in velit. <a href="">Read More > </a>

<h3>Good Investments in the Stock Market</h3>
<p class="updated">25th APRIL 2006</p>
Maecenas tempor leo. Pellentesque viverra, lacus non ornare tristique, velit velit fermentum mauris, eu imperdiet arcu nibh non neque. Proin massa. Mauris sit amet pede sed nisl pellentesque tincidunt. Ut erat est, tempus sit amet, pretium at, volutpat non, nisl. Aenean elementum, erat ut tincidunt dignissim, libero odio fringilla ante, eget convallis lorem ipsum quis ipsum.
<br />
Vivamus risus quam, hendrerit eget, elementum ac, dignissim et, pede. Duis luctus. Praesent ullamcorper ante sed lorem. Donec lobortis, nunc eget commodo mollis, lectus pede eleifend nunc, id ullamcorper turpis justo eget enim. Maecenas massa orci, semper in, posuere nec, auctor tempor, risus. Nunc eu magna eu neque scelerisque lobortis. Aliquam cursus nisl sit amet velit. Sed id nisl.
Curabitur mattis malesuada lacus. Phasellus eu massa. Nulla vel ipsum. Aenean porttitor felis et massa.  <a href="">Read More > </a>

</div> <!-- end of rgtcol div -->

<div id="bttmbar">
<p><a href="#topbar" class="topbar">^ Top</a> | Copyright &copy; Your Copyright Info Here | <a href="">css</a> | <a href="">xhtml</a></p>
</div> <!-- end of bttmbar div -->

</div> <!-- end of container div -->


CSS -------->

body {
      margin: 0;
      padding: 0;       
      font-size: 100%;
      text-align: left;
      background: #e0e0e0;
      color: #333;

/* Global styles */
* {margin: 0; padding: 0; border: 0;}
span {color: #00A2FF}
p, ul, p a, h2 {font-family: Arial, Helvetica, sans-serif}

/* Heading styles */
h1 {margin-left: 10px; font-family: Georgia, serif; color: #333; float: left; font-weight: normal; margin-left: 10px; font-size: 1.55em}
h1 a:link, h1 a:visited, h1 a:active {text-decoration: none; color: #333; font-weight: normal}
h1 a:link span, h1 a:visited span, h1 a:active span {text-decoration: none; font-weight: normal}
h1 a:hover {color: #00A2FF; text-decoration: none; font-weight: normal}
h1 a:hover span {color: #333; text-decoration: none; font-weight: normal}

h3 a, h3 a:link, h3 a:hover {font-weight: normal} /* styling for h3 heading links */
h4 a, h4 a:link, h4 a:hover, h5 a:link, h5 a:hover {font-weight: bold} /* styling for other heading links */

h2 {margin: 0; padding-left: 10px; font-size: 0.75em; background-color: #333; color: #fff; line-height: 2.0em} /* headings on black backgrounds */

h3, h4, h5 {font-family: Georgia, serif; margin: 20px 0 0 10px}
h3 {font-size: 1.25em; line-height: 1.25em; font-weight: normal}
h4 {font-size: 0.90em; line-height: 0.90em; font-weight: bold}
h5 {font-size: 0.70em; line-height: 0.70em; font-family: Arial, Helvetica, sans-serif; font-weight: bold} /* appears like bold paragraph text */

/* Text styles */
p {margin: 10px; font-size: 0.70em; line-height: 1.75em}

p.updated {margin-left: 10px; font-size: 0.60em; line-height: 0.60em; letter-spacing: 0.05em; color: #888}

#siteimg p {   /* This is the large text in the site img div */
      margin: 0 0 0 10px; /* removed usual top and bottom margin from paragraph to avoid layout breaking */
      padding-left: 10px;
      padding-top: 90px;
      font-family: Georgia, serif;
      font-size: 1.45em;
      line-height: 1.05em;
      font-weight: normal;
      letter-spacing: -0.05em;

acronym {border-bottom: 1px dashed #333; cursor: help}

ul {margin-left: 10px; font-size: 0.70em; line-height: 1.75em; list-style: inside square}

/* Paragraph Links */
a {color: #00A2FF; font-weight: bold; text-decoration: none} /* The blue colour */
a:link {color: #00A2FF; font-weight: bold; text-decoration: none}
a:hover {color: #333; font-weight: bold; text-decoration: none}

/* Divs */

#container {
      width: 770px; /* Suits an 800x600 page, allowing for scrollbar */
      background: #fff;
      overflow: hidden

#topbar {   /* Top bar, can be used for extra links etc */
      width: 770px;
      height: 25px;
      background: #333
#hdr {    /* Header/Banner area */
      width: 770px; /* Suits an 800x600 page, allowing for scrollbar */
      height: 4.5em; /* Same as h1 line-height */
      line-height: 4.5em;
      background: #fff

#navbar {   /* Main Navigation area */
      width: 770px; /* Suits an 800x600 page, allowing for scrollbar */
      height: 1.75em;
      background: #f0f0f0; /* Light Grey */

#siteimg {   /* Large Site Image */
      width: 770px; /* Suits an 800x600 page, allowing for scrollbar */
      height: 200px;
      background: url('images/siteimage.jpg') #fff; /* Light Grey */      

#lftcol {
      float: left;
      width: 200px;
      background: transparent;
      overflow: hidden

#rgtcol {
      float: left;
      width: 570px;
      background: transparent;
      overflow: hidden

#bttmbar { /* bottom bar, containing top button and copyright info etc */
      float: right;
      width: 570px;
      height: 3em;
      line-height: 3em;
      background: #fff;
      overflow: hidden

/* Main Navigation */
#nav ul {display: inline}

#nav li {display: inline}

#nav a {
      line-height: 30px; /* same as height of nav bar */
      margin-left: 10px;
      display: inline;
      font-weight: bold

#nav a span {color: #333}

/* Forms, Input boxes and buttons */
form.login {float: right; height: 3em; line-height: 3em; margin: 10px 0 0 0; width: 8.0em;}
input.login {border: 1px solid #333; width: 6em; font-size: 0.95em;}
input.loginbttn {border: 0px solid #fff; width: 3em; background: #00A2FF; color: #fff; font-size: 1.0em}

/* Images */
img.rightimg {float: right; margin-left: 10px}
img.leftimg {float: left; margin-right: 10px}

img.languageimg {float: right; margin: 4px 2px 0 0} /* used for the language flags */


Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 23 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 23 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros