View Full Version : Centering a div around a form?

12-03-2009, 04:00 PM
I'm pretty new to wed designing. I'm a highschool student taking a web design class, but the poor teacher only knows what the almighty google can tell him, and what he keeps saying to do isn't working. Am I simply layering it wrong, or is there something in the CSS that I need to do? I'm lost and don't know what to do :confused:

I'm trying to center a div that's wrapped around a form in a table. Below I'll copy and paste my html , so you can see what I have, and hopefully tell me what I need to put in CSS to center it :D

Here is my html:

<td id="content-main">

<h2>Just Fill Out This Form:</h2>

<div id="f-request">
<th colspan="2">Personal Information</th>
<td colspan="2">Just a liitle information so that we cab contact you about your request.</td>
<td id="f-requirednotice"> Personal Information</th>
<td id="f-label">*Full Name:</td>
<td id="f-input"><input type="text" name="name" id="name" value="Type Here" /></td>
<td id="f-label">*E-mail:</td>
<td id="f-input"><input type="text" name="" id="email" value="Type Here" /></td>
<td id="f-label">*Phone Number:</td>
<td id="f-input"><input type="text" name="phonenum" id="phonenum" value="Type Here" /></td>


Thanks! :)

12-03-2009, 04:58 PM
Hello FlameKissed,
To center an element you need 3 things:

a DocType (see link in sig below)
an element with a width
that elements right/left margins set to auto

You would also need to make sure your form fits in the container your putting it in - can't put a 1000px wide form inside an 800px div. See how the box model works. (http://www.w3.org/TR/CSS2/box.html)

Also, did you know that tables are not for layout (http://www.hotdesign.com/seybold/everything.html)?

12-03-2009, 04:59 PM
I learned the hard way that tables are not so great. Here is a link that shows how to do different CSS based forms:


If you want to center the div, in your css you would set it to have margin left/right to auto. I believe this would be correct. along with everything else excavator says. :)

12-04-2009, 03:55 PM
I did realize that tables aren't for layouts, but I thought it would be fine to use the table structure for a form, to keep it nice and organized and less changeable by the differences of viewers. Was I wrong? :(

I do plan to convert the overall layout of my site to divs if I can figure out how to work them properly, but I decidded to do it the skimping way first, just in case I don't have the time to figure out divs, make it work, and make it look nice before the due date.

But back to the main issue here :p I tried to do the margin-left/right auto, but it still is staying to the left. I'll put the css for the div below. Did I set it up wrong? :confused:

marign-left auto;
margin-right: auto;
width: 500px;
background-image: url(../images/tablebg.png);
padding: 5px;

12-04-2009, 04:24 PM
You don't provide enough information. From the bit you quoted, #f-request is 510px wide.
Does that fit in <td id="content-main">?
How is <td id="content-main"> positioned?

Of course it might all work better if it was spelled right. Have a look at the suggestion about validation in my sig below. There are 2 links to validate with there too, one for you markup and one for your CSS that can show you how to spell marign and where to put the :

12-04-2009, 10:31 PM
Wow, I feel so embarrassed now. Honestly, I don't know how I kept looking right over those spelling errors when I was trying to get it to work. Maybe my group members would have noticed it if they actually understood the least bit of css, but I'm getting off topic. It works when I spell it right. I'm so sorry >< and thanks a lot :o

12-04-2009, 11:52 PM
Haha, no need to be sorry/embarrassed. I spell stuff wrong all the time - I type 70wpm but sometimes it seems like Ithink 30wpm.

12-05-2009, 03:24 AM
I think I'm about 60 when I'm able to concentrate, but about 45-50 when there's distractions. Like my group members >> it's hard trying to find a fellow high school student who's actually trying to learn coding rather than just passing the class XD But I didn't realize there was a validator for css. That really helps :) Dad is a programmer, but he works mostly in Visual BASIC so there's only so much he can do. I've been kind of winging it on all the css I've made :p