How do I put my Parent (wrapper) DIV in center of the page? I have all my content (header, content text, left menu, ...) inside a Parent <DIV> tag. How can I make everything centered in the browser? Thanks
I'm not sure what you mean but i think you want somthing like <div align="center"></div> Code (markup):
In CSS file: 1. add text-align: center; for the body element - so that IE centres the content body {text-align: center;} Code (markup): 2. assign width width: xx px; and add margin: 0 auto; for the wrapper - so that FX & O. centres the content #wrapper {width: 680px; margin: 0 auto;} Code (markup): 3. IF you want the centred content to be aligned "to the left" - add text-align: left; to the wrapper #wrapper {width: 680px; margin: 0 auto; text-align: left;} Code (markup): Assumptions made: - "Parent (wrapper) DIV" has an ID "wrapper" <div id="wrapper"> (..) </div> Code (markup): IF that's a class - just change # --> . - wrapper's width is given in PX --> actually, it can be "anything" (em, %, ..) - px are supposed to be an example Hope that helps. Kindly regards, L.
I tried that, but didn't work.. Here is the link: pokereagles.com Please don't post a live link as I don't want Search Engines to find the website. Thanks
From trial-and-error, I ended up with body{text-align: center} and <center>using these old tags</center>. One is for FireFox and the other is for IE. I hope to try out Lichurec's advice instead
Problem is with your "inside wrapper content".. You have both - header and main content - positioned absolutely. That means that those elements are taken "out" of structure. Therefore - no wrapper code will work for them. You have 2 choices: 1. avoid wrapper and position header & content absolutely 2. leave wrapper and position your elements relatively. And i'd strongly recommend this method CSS file (fragments that I've changed): #Wrapper { width: 950px; margin: 0 auto; text-align: left; } #Header-Menu { font:12px Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; width:950px; height:80px; } #Main-Content { text-align: left; width:675px; height:100%; margin: 0 auto; background-color:#dcddd6; color:#000000; font:12px Verdana, Arial, Helvetica, sans-serif; border:5px solid #888888; } Code (markup): Hope that helps! phree_radical - it's one of the simplest, clearest and most cross-browser method I've ever meet with I use it very often and never had any problems / errors / browser incompatibility reported Kindly regards, L.
you mean - the webpage centring? Are you 100% sure? Just have a look @ the example (I know site's not 100% strict but those 2 "errors" are not xhtml structure based - so technically it is Strict! valid..) And believe me - IF it works for Strict! - it will work for "Transitional" PS Maybe you could show us a (non)working example of your website? Kindly regards, L.
Ugh! I wish I had saved it, because I can't figure out how to get it to do the same thing again. I am pretty sure I was trying to use margin: 0 auto to center an img. Anyways, I do feel kind of sleepy but tonight I can't seem to center the image with margin no matter what I do. <!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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>A test of margin 0 auto in xhtml transitional</title> <meta name="description" content="A test of margin 0 auto in xhtml transitional" /> <meta name="keywords" content="test, margin, auto, xhtml, transitional" /> <style> img { width: 64px; height: 64px; margin: 0 auto; } </style> </head> <body> <img src="text%20messages.jpg" alt="valid img tag" /> </body> </html> HTML: Image stays left-aligned. FireFox 1.5.0.9
Hi again! You've missed the body part <!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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>A test of margin 0 auto in xhtml transitional</title> <meta name="description" content="A test of margin 0 auto in xhtml transitional" /> <meta name="keywords" content="test, margin, auto, xhtml, transitional" /> <style> [B] body{ text-align: center; }[/B] img { width: 64px; height: 64px; margin: 0 auto; } </style> </head> <body> <img src="text%20messages.jpg" alt="valid img tag" /> </body> </html> Code (markup): Should work now ;} Kindly regards, L.
Pff, I thought that was just for IE. And it works without it for centering a div.. I'll figure it all out once I get a computer that doesn't take all day p; Thanks. You're really helpful!