Okay so I am essentially just trying to get the core content of this webpage to be centered within a browser. So if a user were to keep resizing the browser, the content would get re-positioned accordingly.
There must be something wrong with my code because although I have tried setting the margins to "auto" it still does not seem to be working correctly. I've spent enough time trying to figure out my mistake but now I feel I need to enlist some help. Here is the code for the HTML and CSS files:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>San Marcos Dental Center Home</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#youtube_video {
text-align: center;
left: 288px;
top: 469px;
}
</style>
</head>
<body>
<div class="all_content">
<div class="bg_foot">
<div id="main" >
<!-- header begins -->
<div id="header">
<div id="buttons">
<div class="razd_but"><a href="index.html" title="Home" >Home</a></div>
<div class="razd_but"><a href="dr_hurt.html" title="" style="width:95px;">Dr. Hurt</a></div>
<div class="razd_but"><a href="appointment_scheduler.html" title="" style="width:178px;">Schedule Appointment</a></div>
<div class="razd_but" ><a href="our_office.html" title="">Our Office</a></div>
<div class="razd_but"><a href="procedures.html" title="">Procedures</a></div>
<div class="razd_but"><a href="smile_gallery.html" title="" style="width:128px;">Smile Gallery</a></div>
<div class="razd_but"><a href="contact_us.html" title="">Contact Us</a></div>
<div class="razd_but"><a href="directions.html" title="">Directions</a></div>
</div>
<div id="logo">
<p><a href="#">San Marcos </a></p>
<p><a href="#">Dental Center</a></p></div>
<object width="550" height="400" style="position:relative; left:560px; top:-191px">
<param name="SMDC Header Flash" value="header_flash_final.swf">
<embed src="header_flash_final.swf" width="320" height="178">
</embed>
</object>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="left">
<h2>Welcome to San Diego's #1 Dental Provider</h2>
<div class="left_b">
<p><img src="images/img1.jpg" width="102" height="77" class="img" alt="" />Dr. Hurt and the staff of San Marcos Dental Center are proud to offer state-of-the-art, comprehensive dental treatment in a friendly atmosphere to all in the North San Diego County region. Our goal is to help patients achieve and maintain excellent dental health throughout their lifetime. Using the most advanced technology and the latest dental techniques, we provide the best service available in all areas of dentistry.</p>
<p>The following is a list of some of the services we offer:*</p>
<br />
<p style="font-size:14px; font-weight:bold;"><iframe src= "http://www.youtube.com/embed/-2WNev1bpyo" width="320" height="195" frameborder="1" id="youtube_video" title="YouTube_video_player" allowfullscreen style="padding-left: 20px; float:right;"></iframe><em>Affordable Sleep Testing*<br />
Cleanings and Sealants*<br />
Root Canal Treatment*<br />
Periodontal Surgery*<br />
Sedation Dentistry (See Following Section)*<br />
Crowns and Bridges*<br />
Implants*<br />
Cosmetic Veneers*<br />
Tooth Whitening*<br />
Extractions*<br />
Laser Therapy*<br />
Dentures*<br />
And plenty other services!</em> </p>
<p>
</p>
<p><a href="#" class="color_r">read more</a></p>
<br />
</div>
<h2>Sedation Dentistry</h2>
<div class="left_b">
<p><strong>W</strong>e want your dental experience to be a pleasant one. For those people that have anxiety about going to the dentist we offer conscious*<strong>Sedation Dentistry</strong>. We go the extra mile to ensure that our patients are comfortable and relaxed during treatment.</p>
<p>We go all-out to deliver the best dental care - here are just a couple of comments from our patients!</p>
<p> </p>
<p>"I am so happy with the wonderful work you do! You are all so friendly, which is so comforting, because it shows you really care." - E.H.</p>
<p>"Thank you for showing such honest concern and listening to me. I feel I can trust you to do the right thing and tell me the truth about my dental care." - L.C.</p>
<div class="read"><a href="#" class="color_r">read more</a></div><br />
</div>
</div>
<div id="right">
<h1>Scheduler</h1>
<div class="tit_bot"><img src="scheduler_icon.png" width="222" height="93" alt="Schedule an Appointment!" /></div>
<h1>Company News</h1>
<div class="tit_bot">
<ul>
<li><a href="">Lorem ipsum dolor</a></li>
<li><a href="">Sed eget tellus</a></li>
<li><a href="">Donec fringilla</a></li>
<li><a href="">Nullam in consequat augue</a></li>
</ul>
<br />
</div>
</div>
<div style="clear: both;"><img src="images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
<p>
<codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="100" width="800">
<param value="" name="San Marcos Dental Center Offers..." />
<param value="high" name="quality" />
<embed src="footer_banner_final.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="847" height="106"></embed>
</object>
</p>
<p>Copyright 2010. Designed by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates. Modified by Kylan Hurt</a>.<br />
<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
<p> </p>
</div>
<!-- footer ends -->
</div>
</div>
</div>
</body>
</html>
CSS Part:
Code:
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/
*
{
border: 0;
margin: 0;
}
img
{
border: 0px;
}
a{
text-decoration: underline;
color:#1A5B8F;
}
a:hover{
color:#1A5B8F;
text-decoration:none;
}
all_content{
margin-right: auto;
margin-left: auto;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
line-height:20px;
background: url(images/bg.jpg) top left repeat-x #4FBEDD;
margin-right: auto;
margin-left: auto;
}
.bg_foot {
background: url(images/footer.jpg) bottom repeat-x; width:900px;}
#main {
width: 900px;
margin: auto auto;
padding: 15px 20px 20px 15px;
}
#header { width:900px;
padding: 0px 0px 0px 0px;
height: 247px;
background: url(images/head.jpg) 197px 0px no-repeat ;
}
#buttons{
width: 900px;
background: url(images/menu.jpg) left top repeat-x;
text-align:center;
height:40px;
margin-right:0px;
border-style:dotted;
border-color:#FFF;
}
#buttons a {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 100;
display: block;
float: left;
width: 93px;
height: 29px;
text-decoration: none;
color: #FFFFFF;
padding-top: 4px;
text-align: center;
border:thin;
border-color:#FFF;
border-style:double;
}
#buttons a:hover {
text-decoration: none;
background:url(images/but_ov.jpg) center bottom no-repeat;
color:#FFFFFF;
margin-right: 0px;
font-size: 16px;
}
#logo{
background: url(images/logo3.png) left top no-repeat;
height:179px;
padding: 12px 290px 0px 250px;
text-align:center;
}
#logo a {
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-size: 30px;
color: #FFFFFF;
font-weight: bold;
font-style:italic;
text-align:center;
}
#logo H3 a{
font-size: 12px;
background:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
}
#bg_top {
background: url(images/bg_top.jpg) left top no-repeat;
height:304px;
width:317px;
float:left;}
#content{
width: 900px;
padding: 7px 0px 0px 0px;
background:#FFFFFF;
}
#left{
width: 643px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 8px;
float:left;
background: url(images/tit_l.jpg) top repeat-x;
}
.left_b {
padding: 10px 10px 0px 6px;
background:url(images/tit_lb.jpg) left top no-repeat;
}
.razd_l {
height:20px;
width: 100%;
background:url(images/razd_l.gif) bottom repeat-x;}
.tit_bot { background: url(images/tit_rb.jpg) left top no-repeat;
padding: 7px 5px 0px 0px;
}
.text{
padding: 0px 20px 0px 15px;
}
.img { float:left;
margin: 6px 17px 5px 0px;
}
.img_r { float: right;
margin: 10px 0px 0px 15px;
}
.free {
padding: 0px 0px 0px 10px;}
span { color:#0F467E;
font-weight:bold;
}
.dat { text-decoration:underline;}
#right H1{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #FFFFFF;
height: 30px;
padding-left: 10px;
padding-top: 4px;
text-align: center;
background: url(images/tit_r.gif) 0px 0px no-repeat;
}
#left H2{
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:normal;
color: #FFFFFF;
padding-left: 8px;
padding-top: 4px;
height:30px;
text-align:left;
background: url(images/tit_l.gif) 0px 0px no-repeat;
}
.read{
text-align:right;
padding-right:5px;
padding-top: 5px;
}
.color_r { color:#0F467E;
font-weight:bold;
text-decoration:underline;}
a:hover { text-decoration:none;}
.read_r{
text-align:right;
padding-right:5px;
padding-top: 8px;
}
#right{
float:right;
width: 226px;
margin-right: 7px;
background: url(images/right.jpg) top repeat-x;
}
#right ul
{
list-style: none;
padding-left:0px;
padding-top:0px;
margin: 0px;
display:block;
padding-bottom: 0px;
}
#right li{
padding-top: 10px;
padding-left: 23px;
background: url(images/fish.gif) 8px 17px no-repeat;
}
#right .list
{
list-style: none;
padding-left: 23px;
padding-top: 5px;
padding-bottom: 10px;
margin: 0px;
display:block;
background: url(images/fish.gif) 0px 12px no-repeat;
}
#footer{
height: 190px;
width: 900px;
font-size: 10px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 10px 0px 0px 0px;
}
#footer a{
color: #FFFFFF;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #FFFFFF;
font-size: 10px;
text-decoration: underline;
}
I'm just having problems finding where I messed up. I have attached a jpeg of what the site looks like right now. Any help would be greatly appreciated.