centering my div

[jarv]

http://www.jbiddulph.com/cv.htm

as you can see, my page is aligned to the right as i have a float:right;
How can i center the div?

css

body{
background-color:#666666;
font-family:Arial, Helvetica, sans-serif;
}
#Table_01 {
position:relative;
margin-left:auto;
margin-right:auto;
float:right;
clear:both;
border:#000000 solid 1px;
background-color:#FFFFFF;
top:0px;
width:780px;
height:100%
}

h1{
padding-left:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
}
h2{
padding-left:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:22px;
}
h3{
padding-left:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
}
h4{
color:#999999;
padding-left:50px;
margin-bottom:40px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
.categorytext{
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
color:#cccccc;
float:right;
padding-top:20px;
padding-right:20px;
}
.menu a:hover{
text-decoration:none;
text-align:center;
padding-top:24px;
float:left;
height:76px;
width:100px;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
border-right:#333333 1px solid;
}
.menu a:active{
text-decoration:none;
text-align:center;
padding-top:24px;
float:left;
height:76px;
width:100px;
color:#cccccc;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
border-right:#333333 1px solid;
}
.menu a:link{
text-decoration:none;
text-align:center;
padding-top:24px;
float:left;
height:76px;
width:100px;
color:#666666;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
border-right:#333333 1px solid;
}

.menu a:visited{
text-decoration:none;
text-align:center;
padding-top:24px;
float:left;
height:76px;
width:100px;
color:#cccccc;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
border-right:#333333 1px solid;
}
.maintext{
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}
.footertext{
font-family:Arial, Helvetica, sans-serif;
color:#999999;
font-size: 12px;
float:right;
padding-right:15px;
padding-top:15px;
}

.interestingtext{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
color:#999999;
font-size: 12px;
float:left;
padding:5px;
font-style:italic;
}
.picinfo{
margin-right:7px;
padding:7px;
color:#000000;
background-color:#FFFF00;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
float:right;
margin-top:90px;
}


#topleft {
float:left;
background-color:#FFFFFF;
width:557px;
height:121px;
}

#topright {
float:right;
background-color:#FFFFFF;
background-image:url(../img/rightnav.jpg);
background-repeat:no-repeat;
width:223px;
height:197px;
}

#leftnav {
float:left;
background-image:url(../img/leftnav.jpg);
background-repeat:no-repeat;
width:17px;
height:76px;
}

#topnavbar {
float:left;
background-image:url(../img/navmid.jpg);
background-repeat:repeat-x;
width:540px;
height:76px;
}

#categories {
background-color:#FFFFFF;
float:left;
background-image:url(../img/categoriestop.jpg);
background-repeat:no-repeat;
width:212px;
height:62px;
}

#bannerpic {
float:right;
background-image:url(../img/mysite_06.jpg);
background-repeat:no-repeat;
width:568px;
height:159px;
}

#sidebartop {
background-color:#FFFFFF;
float:left;
background-image:url(../img/mysite_07.gif);
background-repeat:no-repeat;
width:212px;
height:11px;
}

#sidebarmid {
float:left;
background-color:#FFFFFF;
margin-left:26px;
width:181px;
height:332px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #A6A6A6;
border-left-color: #A6A6A6;
z-index:auto;
}

#mainarea {
float:right;
background-color:#FFFFFF;
width:568px;
}

#sidebarbottom {
background-color:#FFFFFF;
float:left;
background-image:url(../img/sidebarbottom.jpg);
background-repeat:no-repeat;
width:212px;
height:12px;
}

#bottomleftpic {
background-color:#FFFFFF;
margin-top:23px;
float:left;
clear:right;
background-image:url(../img/bottomleft.jpg);
background-repeat:no-repeat;

width:209px;
height:362px;
}
#footerbar {
float:right;
background-image:url(../img/bottommid.jpg);
background-repeat:repeat-x;
width:571px;
height:47px;
padding-bottom:7px;
}
#footerbarleft {
float:left;
background-image:url(../img/footerleft.gif);
background-repeat:no-repeat;
width:11px;
height:47px;

}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mysite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style/jbidd.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#666666">
<div id="Wrapper">
<div id="Table_01">
<div id="topleft"><h1>John Michael Biddulph</h1>
<h4>web design, programming and digital photography</h4>
</div>
<div id="topright"></div>
<div id="leftnav"></div>
<div id="topnavbar">
<div class="menu"><a href="index.htm">Home</a></div>
<div class="menu"><a href="cv.htm">My CV</a></div>
<div class="menu"><a href="http://www.mutecms.com">muteCMS</a></div>
<div class="menu"><a href="http://www.flickr.com/percy20">Flickr</a></div>
<div class="menu"><a href="http://www.new.facebook.com/profile.php?id=505019396">Facebook</a></div>
</div>
<div id="bannerpic">
<div class="picinfo">Scaffoldart by John (AKA: percy20)<br />
taken on 2nd August</div>
</div>
<div id="categories">
<div class="categorytext">Photography</div>
</div>
<div id="sidebartop"></div>
<div id="sidebarmid">
<div class="interestingtext">
<a href="http://www.flickr.com/photos/percy20/2725392196/" target="_blank"><img src="img/pic1small.jpg" border="0" /></a>&nbsp;
<a href="http://www.flickr.com/photos/percy20/2724588601/" target="_blank"><img src="img/pic2small.jpg" border="0" /></a><br />
<br />
<a href="http://www.flickr.com/photos/percy20/2726189506/" target="_blank"><img src="img/pic3small.jpg" border="0" /></a>&nbsp;
<a href="http://www.flickr.com/photos/percy20/2724320371/" target="_blank"><img src="img/pic4small.jpg" border="0" /></a>
<br />
<br />
<a href="http://www.flickr.com/photos/percy20/2724316235/" target="_blank"><img src="img/pic5small.jpg" border="0" /></a>&nbsp;
<a href="http://www.flickr.com/photos/percy20/2726185678/" target="_blank"><img src="img/pic6small.jpg" border="0" /></a>
<br />
<br />
<a href="http://www.flickr.com/photos/percy20/2706431329/" target="_blank"><img src="img/pic7small.jpg" border="0" /></a>&nbsp;
<a href="http://www.flickr.com/photos/percy20/2725147874/" target="_blank"><img src="img/pic8small.jpg" border="0" /></a>
<br />
<br />
<a href="http://www.flickr.com/percy20/show" target="_blank">Watch a slideshow of my Flickr photostream</a>
</div>
</div>
<div id="mainarea">
<div class="maintext"><h2><b>Latest:</b> Using google maps with my website</h2>
<p>My aim: I wanted to add a google map to my website: <a href="http://www.mypubspace.com">mypubspace.com</a> and for each pub in the database of my website to add a marker on the google map containing relevant information.</p>

This was surely a toughie but I thought I'd cracked it!

Below are instructions on how to do it the usual way - without API
<ul>
<li> Sign up for a free google account if you already have one then login!</li>
<li> Once logged into your google account, add the Maps product</li>
<li> Direct your browser to <a href="http://maps.google.co.uk">http://maps.google.co.uk</a> (you can do this by clicking Maps</li>
<li> Select the tab My Maps and then click on create new map</li>
<li> You can now either create a new map manually or by inmporting a KML file, we will do it manually</li>
<li> Find the location you would like to add a marker (better to search the full address)</li>
<li> You will see a search marker (green arrow) in the place where you would like your marker</li>
<li> Right click on this green arrow and add to map, select your map and save</li>
</ul>
<p>I quote &quot;I thought I'd cracked it!&quot; but there are many different ways in which to add markers to your google maps API </p>
<p>Another way (and most probably the proper way) is to use the Latitude/Longitude in your database to write a query that will export all records from database and you can use as a KML file. <a href="#">more about this here soon</a> </p>
<h2><b>Next project:</b> To recreate mypubspace.com (in php)</h2>
<p>After mastering the basics of the language ASP(VBScript). I have recently been learning the language PHP. I therefore decided to progress my skills and recreate the website I originally created in ASP and rewrite it in PHP using a new design and taking information from a mySQL database.</p>
<p>I also had to learn how to convert existing data from an Access database into a mySQL database </p>
<p>&nbsp;</p>
</div>
</div>
<div id="sidebarbottom"></div>
<div id="bottomleftpic"></div>
<div id="footerbar">
<div id="footerbarleft"></div>
<div class="footertext">All rights reserved mutecms.com &copy; 2008</div>
</div>
</div>
</div>
</div>

</body>
</html>

[_Aerospace_Eng_]

Remove float:right

[jcdevelopment]

Well which DIV? The divs embedded in the foalted div, or the whole div you have floated to the right?

either way, each one can be centered by taking off the floats on it, and using this

margin:0 auto;

[jarv]

ok I removed the float right and it's centered but now it has lost the background color and border?!
http://jbiddulph.com/mysite.html

[_Aerospace_Eng_]

You need to clear your floats http://positioniseverything.net/easyclearing.html

[jarv]

ok so whereever i had a float, I added a clear for instance

if i had a float:left; I put a clear:right;

now my site is all messed up?!

[abduraooft]

ok so whereever i had a float, I added a clear for instance

if i had a float:left; I put a clear:right;

now my site is all messed up?!
Read the link posted by _Aero, which say where and why we need a clear!
Also learn from http://www.bonrouge.com/2c-hf-fixed.php on how to build a standard 2 column layout.

[abduraooft]

Delete this post, lol.
You can delete your recent comments by yourself (from the edit feature)