Hi, I am trying to center my layout using CSS in Dreamweaver. I am using divs and I use the container div to center my layout. However it looks perfect in dreamweaver but when I load it into IE/Firefox, I really don't get a centered layout. I am not sure of why this is happening? I am trying to figure this out for quite some time but had no luck. I would greatly appreciate if somebody could help me out... This is my html code <!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" /> <style type="text/css"> <!-- body { background-color: #030; } --> </style> <link href="/CSS/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="admin"><img src="images/admin-banner.jpg" width="750" height="35" alt="admin banner" /></div> </div> </body> </html> My css file is below * { margin: 0px; padding: 0px; } #wrapper { width: 750px; margin-right: auto; margin-left: auto; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #999999; border-left-color: #999999; } #wrapper #admin { height: 35px; }
You place the div inside a table like this: <body> <table align="center"><tr><td> <div id="wrapper"> <div id="admin"><img src="images/admin-banner.jpg" width="750" height="35" alt="admin banner" /></div> </div> </td></tr></table> </body> Code (markup):
It worked !!! Thanks.. But could you let me know of y I should be putting it in a table for it to work. In addition, I wanted my banner flushed to the top and I even specified a rule * to make all margin and padding to 0. But however, my banner has come down might be a few pixels down when viewed in the browser? Any ideas as to why is this happening? IThanks so much
1) anyone tells you to use a table for centering, tell them to **** off, this isn't 1997. 2) Dreamweaver - well theres' your problem... 3) since Id's are unique, there really is no good reason to EVER dual declare ID's on the same line. 4) condense your properties, it's just clearer. 5) Is this a NEW page you are working on? If so, what's with the tranny doctype? Up the skirt treetrunk doctypes are for supporting old outdated half assed coding techniques, NOT for building new websites. 6) Centers just fine here - for you was it not centering in that pile of shit 'preview pane' asshattery in DW, or was it not centering in REAL BROWSERS? 7) Why do I suspect that your #admin should either not even exist, exist just on the IMG tag, or be a h1? <!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" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> </head><body> <div id="wrapper"> <div id="admin"> <img src="images/admin-banner.jpg" width="750" height="35" alt="admin banner" /> <!-- #admin --></div> <!-- #wrapper --></div> </body></html> Code (markup): With this as the screen.css * { margin:0; padding:0; } body { text-align:center; /* center #pageWrapper in IE 5.x */ background:#030; } #wrapper { width: 750px; margin:0 auto; text-align:left; border:solid #999; border-width:0 1px; } #admin { height:35px; } Code (markup): Works just fine here.
Tables should never be used in modern coding. Use margin: 0 auto (example): body { width:750px; margin:0 auto; } Code (markup):