...

View Full Version : Centering a div without tables



ZeroError
01-03-2010, 07:21 PM
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:


#divname {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}

and this:


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

Excavator
01-03-2010, 07:52 PM
Hello ZeroError,
To center an element you need three things:

a DocType declaration
an element with a width
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 -
<!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>

ZeroError
01-03-2010, 09:19 PM
<?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 :D

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.

Excavator
01-03-2010, 09:47 PM
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.

ZeroError
01-03-2010, 09:50 PM
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.

Excavator
01-03-2010, 09:56 PM
I removed the "display: table-cell;" and the button now appears centered, but at the top of the page.

Try this -

#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

margin-top: 50px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto; (auto is assumed here because it's auto on the right)

ZeroError
01-03-2010, 10:00 PM
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!!

Excavator
01-04-2010, 01:15 AM
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?

kjtocool
01-04-2010, 02:40 AM
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.

Excavator
01-04-2010, 02:47 AM
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 (http://www.google.com/search?q=IE6+quirks+mode&sourceid=ie7&rls=com.microsoft:en-us:IE-SearchBox&ie=&oe=).

Arbitrator
01-04-2010, 04:53 AM
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:


#divname {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}

and this:


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


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


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.


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 (http://www.google.com/search?q=IE6+quirks+mode&sourceid=ie7&rls=com.microsoft:en-us:IE-SearchBox&ie=&oe=).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).

ZeroError
01-04-2010, 10:02 AM
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!

abduraooft
01-04-2010, 10:57 AM
Take a look at the dead centre (http://www.wpdfd.com/editorial/thebox/deadcentre4.html) approach.

ZeroError
01-04-2010, 10:59 AM
Thank you, that was just what I was looking for!
I'll bookmark that for future reference.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum