1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do I put my Parent (wrapper) DIV in center of the page?

Discussion in 'HTML & Website Design' started by Nima, Dec 20, 2006.

0
  1. #1
    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
     
    Nima, Dec 20, 2006 IP
  2. Rogem

    Rogem Peon

    Messages:
    171
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'm not sure what you mean but i think you want somthing like

    <div align="center"></div>
    Code (markup):
     
    Rogem, Dec 20, 2006 IP
    Nima likes this.
  3. Nima

    Nima Well-Known Member

    Messages:
    3,489
    Likes Received:
    243
    Best Answers:
    0
    Trophy Points:
    175
    #3
    That centers the text inside the DIV

    I want to center the parent DIV itself.
     
    Nima, Dec 20, 2006 IP
  4. KPeh

    KPeh Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    div#container { margin: 0 auto; }

    You may also want to add a width tag!
     
    KPeh, Dec 20, 2006 IP
  5. Lichurec

    Lichurec Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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.
     
    Lichurec, Dec 20, 2006 IP
    Nima and phree_radical like this.
  6. Nima

    Nima Well-Known Member

    Messages:
    3,489
    Likes Received:
    243
    Best Answers:
    0
    Trophy Points:
    175
    #6
    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
     
    Nima, Dec 20, 2006 IP
  7. phree_radical

    phree_radical Peon

    Messages:
    563
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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 :)
     
    phree_radical, Dec 20, 2006 IP
  8. Lichurec

    Lichurec Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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.
     
    Lichurec, Dec 20, 2006 IP
  9. Rogem

    Rogem Peon

    Messages:
    171
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    No it centres everything inside the DIV, for example tables also :)
     
    Rogem, Dec 21, 2006 IP
  10. phree_radical

    phree_radical Peon

    Messages:
    563
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #10
    It didn't work for me with xhtml transitional. It worked when I removed the doctype.
     
    phree_radical, Dec 21, 2006 IP
  11. Lichurec

    Lichurec Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #11
    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.
     
    Lichurec, Dec 21, 2006 IP
  12. phree_radical

    phree_radical Peon

    Messages:
    563
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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
     
    phree_radical, Dec 21, 2006 IP
  13. Lichurec

    Lichurec Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #13
    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.
     
    Lichurec, Dec 21, 2006 IP
  14. phree_radical

    phree_radical Peon

    Messages:
    563
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #14
    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!
     
    phree_radical, Dec 21, 2006 IP