flowingwindrider Posted July 25, 2007 Share Posted 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%; } Quote Link to comment https://forums.phpfreaks.com/topic/61746-solved-centering-a-div/ Share on other sites More sharing options...
moberemk Posted July 25, 2007 Share Posted 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? Quote Link to comment https://forums.phpfreaks.com/topic/61746-solved-centering-a-div/#findComment-307412 Share on other sites More sharing options...
flowingwindrider Posted July 26, 2007 Author Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/61746-solved-centering-a-div/#findComment-307527 Share on other sites More sharing options...
flowingwindrider Posted July 26, 2007 Author Share Posted July 26, 2007 Oh, I forgot to mention, this is happening in both FF and IE6 Quote Link to comment https://forums.phpfreaks.com/topic/61746-solved-centering-a-div/#findComment-307528 Share on other sites More sharing options...
bronzemonkey Posted July 26, 2007 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/61746-solved-centering-a-div/#findComment-307546 Share on other sites More sharing options...
flowingwindrider Posted July 26, 2007 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/61746-solved-centering-a-div/#findComment-307558 Share on other sites More sharing options...
moberemk Posted July 26, 2007 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/61746-solved-centering-a-div/#findComment-307564 Share on other sites More sharing options...
flowingwindrider Posted July 26, 2007 Author Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/61746-solved-centering-a-div/#findComment-307567 Share on other sites More sharing options...
moberemk Posted July 26, 2007 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/61746-solved-centering-a-div/#findComment-307575 Share on other sites More sharing options...
flowingwindrider Posted July 26, 2007 Author Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/61746-solved-centering-a-div/#findComment-307581 Share on other sites More sharing options...
moberemk Posted July 26, 2007 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/61746-solved-centering-a-div/#findComment-307611 Share on other sites More sharing options...
flowingwindrider Posted July 26, 2007 Author Share Posted July 26, 2007 Worked like a charm, thanks! Quote Link to comment https://forums.phpfreaks.com/topic/61746-solved-centering-a-div/#findComment-307699 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.