Having problems centering web page within browser(s)
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>
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.
Well, this looks like a simple solution. You have gone the route of trying to center your all content div using auto with your left and right margins. Which is one way to do it, but you forgot to add a width to you div, without that its pointless. Btw, if you are going to use this way you need to know that some browsers do not center the containing blocks using this method as they ignore the auto margins. These browsers include:
NN4 (Mac and Win)
Win/IE4
Win/IE5
Win/IE5.5
Win/IE6 (when in quirks-mode)
By adding two simple rules, this problem can be overcome in all of the browsers mentioned above, excluding NN4.
1. Center the body
While these browsers ignore auto margins, they will follow “text-align: center”. If this is applied to the body, the containing block will center correctly. So, a new rule is added:
The only problem with this new rule is that all content on the page is now center-aligned. To overcome the center alignment problem, a new declaration is added within the containing block rule set – “text-align: left”. The final CSS code is:
__________________ Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
I always recommend the HEAD First series of books for learning a new coding language. ^_^
Last edited by Chris Hick; 04-25-2011 at 05:53 PM..
Thank you for the responses. Chris, your idea worked although I am a bit confused as to why I have to use the "width: 50em;" part of the code... I'd prefer if the main DIV portions could re-center when I re-size the browser window.
If you don't give the div a width, it will not center, instead it will resize to the maximum space available, like the size of the parent container which is probably the browser window.
divs by default: take the maximum width, and expands the height to encompass everything inside it.
Wojjie is correct, d'Anconia. In order for a div to be centered upon the page it has to have a specific width. Think about it this way, say you are a browser and someone tells you hey I want to put auto margins on the sides of this div, meaning they equal on both sides, and have 0 margins on the top and bottom. You say ok, I can do that! But then you realize, how can I make the margins equal on either side of the div if I don't know the width of the div? If the browser doesn't have a number to start with and subtract the difference from the total width of the user's browser then there is no way to find out how to make the margins equal on the sides. Does that make sense??
Also, it doesn't have to be 50em. It can be any width that you want and in any form-percent, em, px. That is entirely up to you.
__________________ Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
I always recommend the HEAD First series of books for learning a new coding language. ^_^
Last edited by Chris Hick; 04-28-2011 at 04:36 PM..
Okay, thank you for the follow-up responses. I will tamper with things a little bit tonight (or tomorrow) and let you guys know how it goes. What you're saying makes sense and I think what I pictured in my mind is the possibility of setting the div width as a percentage of the entire browser window. I will have to see how this affects the text within the divs, etc, especially if DIVs inside of the outer DIV are in fixed px or em width.
In case you couldn't tell I'm a bit of a beginner at this but having helpful people like you guys on this forum saves me a bunch of time and heartache. Thanks for the responses!
Before you post, read our: 
