[SOLVED] Centering a Div

flowingwindrider · July 25, 2007

I've spent quite some time now searching the web for info on how to center a div. I've tried several different ways, but my div is still off-center by roughly 1/2 inch to the left. I've named a div 'center' and put all my other divs inside of it. Here is the css code that I am trying:

#center{
margin: 0 auto;
width: 90%;
}

Any thoughts as to why it is so far off-center?

I've also tried setting the css code as:

#center{
        margin-right: auto;
        margin-left: auto;
        width: 90%;
}

moberemk · July 25, 2007

That's odd. Do you have any other margins in the code? Which browser are you using?

Also, is the 90% the width for the site? Or is there another div with a different width inside it?

flowingwindrider · July 26, 2007

There are in fact several divs contained inside the 'main' one, with different widths specified. It might be easier to see what I mean if you see the page. It is located at bransonentertainersguild.com/Members/classifieds.php

Each column is a separate table, and I want to center the whole mess of it without loosing the form that it has now. The full code of the page is:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Classifieds Categories</title>
<style type="text/css">
#center{
margin: 0 auto;
width: 90%;
}
a{
color: #0000ff;
}
.b1{
position: relative;
top: 2px;
left: 2px;
float: left;
width: 5%;
font-size: 22pt;
}
.b2{
float: left;
width: 43%;
}
.b3{
float: left;
width: 43%;
}
.t1{
font-family: Poor Richard;
font-size: 14pt;
}
.t2{
font-family: Verdana;
font-size: 8pt;
}
.t3, .t4{
position: relative;
font-family: Poor Richard;
font-size: x-large;
text-align: center;
}
.t3{
top: 8px;
}
.t4{
clear: both;
}
.t5{
font-size: 12pt;
font-style: italic;
}
</style>
</head>

<body style="background-color: #0ACCF5; background-image: url('../images/InsetBackground.jpg')">
<?php

$db = "bransone_classifieds";
include("connect.php");
$query_count = "SELECT COUNT(Ad_Id) AS Total FROM employment";
$result_count = mysql_query($query_count) or die ("Error in query" . mysql_error());
$fetch_result  = mysql_fetch_assoc($result_count) or die ("Error in query" . mysql_error());
$totalrows = $fetch_result['Total'];
$img = "\"../images/folder.gif\" width=\"17\" height=\"14\"";

mysql_close($dbh);

echo("<div class=\"t3\">Classified Ad Categories</div>");
echo("<br /><br />");
echo("<div id=\"center\"><div class=\"b1\"><table>
<tr><td><img src=".$img." /><br><br></td></tr>
    <tr><td><img src=".$img." /><br><br></td></tr>
    <tr><td><img src=".$img." /><br><br></td></tr>
    <tr><td><img src=".$img." /><br><br></td></tr>
<tr><td><img src=".$img." /></td></tr>
    </table></div>

<div class=\"b2\"><table>
<tr><td><span class=\"t1\"><a href=\"classifieds/automobiles/automobiles.htm\" title=\"Click to see Automobile Listings\">Automobiles</a><br></span>
	<span class=\"t2\">Cars, trucks, vans, sport utilities<br><br></span></td></tr>
<tr><td><span class=\"t1\"><a href=\"classifieds/employment/employment_listings.php\" title=\"Click to see Employment Oppertunities\">Employment</a></span><span class=\"t5\"> (".$totalrows.")</span><br>
	<span class=\"t2\">Non-Performance or Tech Opportunities<br><br></span></td></tr>
<tr><td><span class=\"t1\"><a href=\"classifieds/general/general_merchandise.htm\" title=\"Click to see General Merchandise Listings\">General Merchandise</a></span><br>
	<span class=\"t2\">Appliances, electronics, books, music, video games, etc.<br><br></span></td></tr>
<tr><td><span class=\"t1\"><a href=\"classifieds/pets/pets_and_supplies.htm\" title=\"Click to see Pet Listings\">Pets & Supplies</a></span><br>
	<span class=\"t2\">Pets, animals, supplies<br><br></span></td></tr>
<tr><td><span class=\"t1\"><a href=\"classifieds/rentals/rentals_and_roomates.htm\" title=\"Click to see Rental Listings\">Rentals & Roommates</a></span><br>
	<span class=\"t2\">Apartments, condo rentals, roommates, seasonal housing</span></td></tr>
</table></div>

<div class=\"b1\"><table>
<tr><td><img src=".$img." /><br><br></td></tr>
    <tr><td><img src=".$img." /><br><br></td></tr>
    <tr><td><img src=".$img." /><br><br></td></tr>
    <tr><td><img src=".$img." /><br><br></td></tr>
<tr><td><img src=".$img." /></td></tr>
    </table></div>

<div class=\"b3\"><table>
<tr><td><span class=\"t1\"><a href=\"classifieds/computers/computers_and_software.htm\" title=\"Click to see Technology Listings\">Computers & Software</a></span><br>
	<span class=\"t2\">Desktops, laptops, accessories, software<br><br></span></td></tr>
<tr><td><span class=\"t1\"><a href=\"classifieds/furniture/furniture.htm\" title=\"Click to see Furniture Listings\">Furniture</a></span><br>
	<span class=\"t2\">Sofas, tables, beds, etc.<br><br></span></td></tr>
<tr><td><span class=\"t1\"><a href=\"classifieds/music/music_and_musical_equipment.htm\" title=\"Click to see Music Listings\">Musical & Musical Equipment</a></span><br>
	<span class=\"t2\">Sheet music, instruments, sound equipment, etc.<br><br></span></td></tr>
<tr><td><span class=\"t1\"><a href=\"classifieds/real estate/real_estate.htm\" title=\"Click to see Real Estate Listings\">Real Estate</a></span><br>
	<span class=\"t2\">Homes, condos, properties<br><br></span></td></tr>
<tr><td><span class=\"t1\"><a href=\"classifieds/theatrical/theatrical_equipment.htm\" title=\"Click to see Theatrical Equipment Listings\">Theatrical Equipment</a></span><br>
	<span class=\"t2\">Lights, gels, costumes, props, etc.</span></td></tr>
</table><br /><br /></div></div>");

echo("<div class=\"t4\">Have a Classified Ad to Submit? <a href=\"classifieds/submission.htm\">Click here</a>.</div>");

?>
</body>
</html>

flowingwindrider · July 26, 2007

Oh, I forgot to mention, this is happening in both FF and IE6

bronzemonkey · July 26, 2007

have you reset the browser defaults? try including this at the top of your css file

*, html, body {margin:0; padding:0}

if that doesn't work also try resetting the table, tr, td elements

flowingwindrider · July 26, 2007

*, html, body {margin:0; padding:0}

This didn't work, and I'm not sure what you mean by resetting the table, td, and tr elements

moberemk · July 26, 2007

It works; seriously, it's always been working. The problem is, while the content is centered, the inside isn't. Add this to your css to see what happens to the box:

#center { border: 1px solid red; }

That's your box right there-while it is centered, nothing else within it is. It only looks off-center because of the tables.

flowingwindrider · July 26, 2007

Hmmm, I see what you mean. First of all, that's a good trick to check things like this, thanks for the tip. Second, should that red border have gone completely around the box or just been a line on the top? As to the 'imbalance', I'll just have to try adjusting my tables.

moberemk · July 26, 2007

All around. Also, check out the Firefox extension Web Developer Toolbar. That thing has so many useful features, like adding red borders to all block level elements.

flowingwindrider · July 26, 2007

Any guesses as to why the border was just a single line across the top? I added the code exactly as you had it, and I've had this problem trying to add borders before.

moberemk · July 26, 2007

Simple enough. All of your content is positioned with floats, but you don't have any clear elements below the content that forces the box to grow to accommodate the full size of the floated elements. Just add a div with clear: both; applied to it just before the end of your centering div, enable the red border again, and you'll see what it does.

flowingwindrider · July 26, 2007

Worked like a charm, thanks!

Sign In

[SOLVED] Centering a Div

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information