View Full Version : Centering css content box

08-28-2010, 06:20 PM
Hello all,

I have the following form wrapped in a content box. Here is the div code:

<div class="dialog type2 drip">
<div class="content">
<div class="wrapper">
<div id="12" align="center">
<div class="t"></div>
<!-- Optional: Standard Module Format (hd/bd/ft) for providing semantic, meaningful content. Not required for visual effect. -->
<div class="hd">
<h1>Land of Wars</h1>
<div class="bd">
<form name="login_form_2" method="post" action="login2.php">
<p>Username: <input type="text" name="user" id="user"></p>
<p>Password: <input type="password" name="pass" id="pass"></p>
<div class="ft">
<div align="center">
<p><input type="submit" name="login_form2" class="groovybutton" id="login" value="Login"></form></p>
<form name="register" method="post" action="reg.php">
<p><input type="submit" name="register" class="groovybutton" id="register" value="Register"></p>
<div class="b"><div></div></div>

I have tried to put align="center" in every div tag but no matter where they go it always stays to the left. Where would I go from here?

08-28-2010, 07:19 PM
to center something in css it needs an explicit width and margin:auto;

the code you posted is useless to help further.

and align="center" is deprecated

08-28-2010, 07:29 PM
Ah, I see. Here is the css code that it works off of.

/* dialog variants - not needed for first blue (non-drip) style */

.dialog.type2 .content,
.dialog.type2 .t,
.dialog.type2 .b,
.dialog.type2 .b div {

/* "drip" variant */

.dialog.drip .b,
.dialog.drip .b div {

.dialog.drip {

.dialog.drip .t,
.dialog.drip .b div,
.dialog.drip .hd,
.dialog.drip .bd,
.dialog.drip .ft,
.dialog.drip .wrapper {

.dialog.drip .wrapper {

.dialog .wrapper .hd,
.dialog .wrapper .bd,
.dialog .wrapper .ft {

.dialog.drip .hd,
.dialog.drip .bd,
.dialog.drip .ft {
padding:0px 2px 0px 12px;

So where would it go? I see a couple margin variables.

08-28-2010, 07:56 PM
wrap your original code in this DIV:

<div id="testing">

<!-- your div/form code here -->


and add

#testing { margin:auto; width:600px; }

600 px is a GUESS i have no idea what or how big your form container is

assuming the form fits within 600px; this code will center it. Is that what you'e after?

08-28-2010, 09:56 PM
Thank you so much! That is exactly what I was looking for...

on a side note, for aligning, is id used instead of class? What was the reason for using id?

08-28-2010, 10:09 PM
only that #ids take priority over classes, overwriting any other possible parent divs/css that may have had an effect on the test code

class is fine

you can infact apply this to

<div class="dialog type2 drip">

any one of those classes, but as it's hard to diagnose without an actual page, i just added a "wrapper" in the form of "testing" to check that was in fact what you wanted to achieve.

Major Payne
08-29-2010, 09:59 AM
Looks like a severe case of div-itis as many of those are not needed. As stated, a width less than 100% must be given for a container to be centered, but the CSS property to use is this:

margin: 0 auto;

You can set a top/bottom margin, if you wish with that, and still have it centered horizontally. The vertical centering does not always work in all browsers using auto for the top/bottom margin position. If you add only a bottom margin, be sure to put it AFTER the centering CSS.

Ids do not take priority over classes. If you have CSS to be used ONCE per page and only ONCE on every page, then there is no need for a CSS class. If you have a style that needs to be used more than ONCE per page, then you must use a CSS class selector.

The order of precedence for CSS:

1) External CSS file linked to on every page.

2) Embedded CSS between the style tags placed between the head tags of a page.

3) Inline CSS placed inside the tag itself will override all previous styling options.

08-29-2010, 10:15 AM
This may be of some general use. (http://www.wpdfd.com/editorial/thebox/deadcentre4.html)