How to center the page div container?

Discussion in 'HTML & Website Design' started by chrisj, Apr 7, 2011.

0
  1. #1
    The main page div container isn't centering when I add float: center to the CSS.
    When I add something like this in the CSS margin: 150px;
    It'll be centered in IE8 on my PC, but not centered in IE8 on a laptop.
    Help please
     
    chrisj, Apr 7, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I wish they did have center. Unfortunately, you can only float left or right.
    Normally, you add a width and margin: 0 auto; to the container.
    Try that, but remove float: center and the margin first.
     
    Cash Nebula, Apr 8, 2011 IP
    eruct likes this.
  3. kumarpyasa

    kumarpyasa Peon

    Messages:
    115
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hello dear
    <div style="text-align: center">
     
    kumarpyasa, Apr 8, 2011 IP
  4. amardesign

    amardesign Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    If you want to center div, give it fixed width and set margin to auto.
     
    amardesign, Apr 8, 2011 IP
  5. boundlessmartin

    boundlessmartin Active Member

    Messages:
    714
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    There's no such thing as float:center. If you want to centre a block level element, give it a width and margin:0 auto.
     
    boundlessmartin, Apr 8, 2011 IP
  6. pkuser

    pkuser Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You need to create a wrapper with 100% and then give margin: 0 auto; for targeted div.
     
    pkuser, Apr 9, 2011 IP
  7. anupkumarpandey

    anupkumarpandey Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    <div style="position:absolute; text-align:left; background-color:eek:renge; left:190px; top:100px; width:100px; height:100px;z-index:99; visibility:visible">your content hear<div>
    set the left,top,according to your requirement .it works try this code...:cool:
     
    anupkumarpandey, Apr 10, 2011 IP
  8. Fort Heresy

    Fort Heresy Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I've researched centering a div exhaustively. Many say that "width" and/or "margin: 0 auto" and/or "text-align:center" are required, but I don't think that's true. I have found that the following will work in ALL cases:

    CSS
    .outer {text-align:center}
    .inner {display:table; margin-left:auto; margin-right:auto} /* - \*/ * html .inner {display:inline; zoom:1} /* - */

    HTML
    <div class="outer">
    <div class="inner">
    your content
    </div></div>

    If you don't care about IE, it gets even simpler: You would not need the outer div (only IE requires text-align) and you would not need the display:inline and zoom:1.
     
    Fort Heresy, Apr 13, 2011 IP
  9. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Comical genius :D

    Hey, who needs markup anyway. Let's do it all in Javascript.
    
<!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' xml:lang='en' lang='en'>
<head profile='http://gmpg.org/xfn/11'>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Center Demo</title>
<script type='text/javascript'>
	window.onload = function () {
		var div = document.createElement('div');
		div.id = 'container';
		div.style.background = '#eee';
		div.style.height = '600px';
		div.style.margin = '0 auto';
		div.style.width = '600px';
		document.body.appendChild(div);
	}
</script>
</head>
<body>
</body>
</html>
    Code (markup):
     
    Last edited: Apr 13, 2011
    Cash Nebula, Apr 13, 2011 IP