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 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