HTML Noob - cant figure out <div> tags

[Phear46]

	<b>Enroll a student:</b>

<div id="content" style="width:100%;">
	<form name="enroll" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
	
	<div name="user_info" style="background-color:#f0f0f0;height:35px;width:100%;">
		<div name="first_name" style="background-color:#ff0000;height:35px;width:20%;float:left;">
			First Name:<input type="text" name="firstname" size="8">
		</div>
		<div name="surname" style="background-color:#00ff00;height:35px;width:20%;float:left;">
			Surname:<input type="text" name="surname" size="8">
		</div>
		<div name="dob" style="background-color:#0000ff;height:35px;width:20%;float:left;">
			D.O.B:<input type="text" name="dob" size="8">
		</div>
	</div>
		<br>
	<div name="class_info" style="width:100%;">
		<div name="class_info_header" style="text-align:left;width:100%;">
		Class:
		</div>

		<div name="class_col_1" style="height:100px;width:50%;float:left;">
			<li><input type="checkbox" name="class[]" value="english">English<br>
			<li><input type="checkbox" name="class[]" value="maths">Maths<br>
			<li><input type="checkbox" name="class[]" value="science">Science<br>
			<li><input type="checkbox" name="class[]" value="sports">Sports<br>
		</div>

		<div name="class_col_2" style="background-color:#ff0000;height:100px;width:50%;float:left;">
			<li><input type="checkbox" name="class[]" value="history">History<br>
			<li><input type="checkbox" name="class[]" value="geography">Geography<br>
			<li><input type="checkbox" name="class[]" value="ict">ICT<br>
		</div>

		<div name="submit_button" style="background-color:#ababab;text-align:left;width:100%;">
			<input type="submit" name="enrollsubmit" value="Enroll!">
		</div>
	</div>

	</form>
</div>

Can anyone tell me why this doesnt work? im making a simple php script but i just wanted to lay it out nice first. I cant get the button to center, and also i cant see why the whole class_info div is inheriting the colour of submit_button div.

 

Im lost!

[Jessica]

Move your styles into a css file instead of doing them inline, and use a tool like Firebug to debug. I don't see anything in there about centering a button.

[InoBB]

try this

set margins for the button CSS: 

#buttonid {
    margin-left: auto;
    margin-right: auto;
    }

This should make it auto set the left and right spacing of the button, thus making it center.

 

 

Edit: Sorry double post, someone can delete please?

Edited May 1, 2013 by InoBB

[InoBB]

Use CSS margins to center the button:

#buttonid {
    margin-left: auto;
    margin-right: auto;
    background-color: #ababab;
    }

You can change from input to button with html5 and just call an id of the specified CSS tag you want it to appear with:

<button type='submit' name='enrollsubmit' id='buttonid'>Enroll!</button>

This should center the button once it auto sets left and right margins.