Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Centering a div without tables

    I'm viewing a webpage I have created through Firefox 3.5.6 and a div I've written does not appear in the center of the page.

    I've tried using this:
    Code:
    #divname {
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
    }
    and this:
    Code:
    #divname {
        margin: auto;
    }
    Yet neither seem to work.
    Is there another way I can do this in a way which is easily modifiable by Javascript?

    Thanks in advance.
    Last edited by ZeroError; 01-03-2010 at 07:23 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ZeroError,
    To center an element you need three things:
    1. a DocType declaration
    2. an element with a width
    3. that elements right/left margins set to auto


    Your example does not have a width. You don't quote the entire code so I can't guess if you're using a DocType or not.


    example -
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #divname {
    	height: 400px;
    	width: 400px;
    	margin: 0 auto;
    	background: #00f;
    }
    </style>
    </head>
    <body>
    	<div id="divname"></div>
    </body>
    </html>
    Last edited by Excavator; 01-03-2010 at 07:55 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    <?php
    require('../includes/bans.php');
    ?>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    	<head>
    	
    		<link rel="stylesheet" type="text/css" href="../includes/style1.css">
    		
    		<title>My skills are unbeatable.</title>
    		
    		<script type="text/javascript" language="Javascript" src="clickmecode.js">
    		</script>
    		
    		<style type="text/css">
    			#btnarea	{
    						width: 55px; 
    						height: 25px; 
    						display: table-cell; 
    						text-align: center; 
    						vertical-align: middle;
    						margin: 0 auto;
    						padding: 0px;
    						}
    						
    			#pagearea	{
    						width: 100%; 
    						height: 100%; 
    						position: fixed; 
    						top: 0; 
    						left: 0; 
    						}
    			</style>
    		
    	</head>
    	
    	<body>
    	
    		<div id="pagearea">
    		
    			<div id="btnarea" onMouseOver="moveTehButton();">
    						
    				<input type="button" id="btn" value="Click" onMouseOver="moveTehButton();" onClick="alert('Say something useful.')">
    			
    			</div>
    		
    		</div>
    		
    	</body>
    	
    </html>
    That's what it is

    Could it have anything to do with combining a <link> and <style> set of tags?
    I wouldn't have thought so, but I wouldn't know.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Remove display: table-cell; and see what it does.

    Also, the line <?php require('../includes/bans.php');?> is going to cause problems in IE. That browser likes the DocType to be on the very first line.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jan 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    About the PHP, I can simply remove the whitespace between that and the DocType. This wasn't an actual issue in the display for me (I use Firefox) but I suppose it's good practice for cross-browser compatibility.

    I removed the "display: table-cell;" and the button now appears centered, but at the top of the page.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ZeroError View Post
    I removed the "display: table-cell;" and the button now appears centered, but at the top of the page.
    Try this -
    Code:
    #btnarea	{
    width: 55px; 
    height: 25px; 
    text-align: center; 
    vertical-align: middle;
    margin: 50px auto 0;
    padding: 0px;
    }

    The order it's read in is top/right/bottom/left so that reads like
    Code:
    margin-top: 50px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;  (auto is assumed here because it's auto on the right)
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Jan 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Alright, thanks.
    I WANTED it properly centred, but it seems that's going to be difficult, and it's only until the button is rolled over, I suppose.

    I'll just tweak the top value until it seems right.
    Thank you!!

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ZeroError View Post
    Alright, thanks.
    I WANTED it properly centred, but it seems that's going to be difficult, and it's only until the button is rolled over, I suppose.

    I'll just tweak the top value until it seems right.
    Thank you!!
    I'm not sure what you mean by "properly" centered.
    So far, I believe, we've managed to horizontally center your #btnarea, haven't we?

    Are you trying to center it vertically as well?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Sep 2007
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Also, the line <?php require('../includes/bans.php');?> is going to cause problems in IE. That browser likes the DocType to be on the very first line.
    Not true.

    PHP is server side code and thus depending on what is done in that code, it may not cause any issues at all. Only if output is echoed out above the doctype would any issues be caused.

    It's actually very common practice to have PHP above the doctype as some things need to be executed server side before the headers are sent to the browser.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by kjtocool View Post
    It's actually very common practice to have PHP above the doctype as some things need to be executed server side before the headers are sent to the browser.
    Yes it is. It's also very common for IE6 to choke on it.
    Anything in front of the DocType puts IE into quirks mode.
    Last edited by Excavator; 01-04-2010 at 02:51 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by ZeroError View Post
    I'm viewing a webpage I have created through Firefox 3.5.6 and a div I've written does not appear in the center of the page.

    I've tried using this:
    Code:
    #divname {
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
    }
    and this:
    Code:
    #divname {
        margin: auto;
    }
    Yet neither seem to work.
    If you're going for vertical centering, this isn't going to work. As far as I know, setting the top and bottom margin properties to auto has no effect. (Actually, I vaguely remember it affecting a rarely used positioning technique, but I forgot how it works.) The two code blocks you've provided are effectively identical, so it's not surprising that the rendered output is identical.

    Quote Originally Posted by ZeroError View Post
    About the PHP, I can simply remove the whitespace between that and the DocType. This wasn't an actual issue in the display for me (I use Firefox) but I suppose it's good practice for cross-browser compatibility.
    I don't believe white space is an issue. It's any other code including some that isn't rendered such as SGML comments or an unrecognized processing instruction. (The XML declaration was treated an an unrecognized PI until IE7.)

    Quote Originally Posted by ZeroError View Post
    I removed the "display: table-cell;" and the button now appears centered, but at the top of the page.
    You can use this to vertically center content when combining it with vertical-align. It works in IE8, but not older versions of that browser. If top alignment is a suitable fallback for you in older versions of IE, then that may be a good compromise.

    Quote Originally Posted by Excavator View Post
    Yes it is. It's also very common for IE6 to choke on it.
    Anything in front of the DocType puts IE into quirks mode.
    The choking only occurs when there is output. PHP includes at the top of the document are generally used for pre-processing and configuration and don't output any code into their current location (aside from maybe an XML declaration which has to be escaped so PHP doesn't get confused, but, since he seems to have an HTML 4.01 Transitional document, I don't expect that that would be an issue).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    New Coder
    Join Date
    Jan 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The PHP only outputs anything if the browser is banned, in which case they wouldn't see the page anyway.

    And yeah, sorry for the misunderstanding, I did mean vertically centred, but it shouldn't be a problem. Thanks for all your help!

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Take a look at the dead centre approach.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #14
    New Coder
    Join Date
    Jan 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you, that was just what I was looking for!
    I'll bookmark that for future reference.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •