Hi again
All things are possible (well most) it's just a case of following rules carefully.
Width and height are possible with <span>s it's just a case of how it's implemented.
I'd still go with <divs> much easier and less mark-up. You wanted three groups of three checkboxes? Here you go: http://www.littleblueplane.com/test/checkboxes.html
Here's the code in case I ever get rid of that page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Request more Information</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<STYLE TYPE="text/css">
<!--
#wrapper {font: 76% Tahoma, sans-serif;}
#checkbox1 {width: 200px;float:left;}
#checkbox2 {width: 200px;float:left;}
#checkbox3 {width: 200px;float:left;}
-->
</STYLE>
</head>
<body>
<div id="wrapper">
<p>Please select any of the following </p>
<!-- the "label" tags make the form more accessible for those using text readers -->
<div id="checkbox1">
<input type=checkbox name="service1" id="service1"><label for="service1">Service One</label><br />
<input type=checkbox name="service2" id="service2"><label for="service2">Service Two</label><br />
<input type=checkbox name="service3" id="service3"><label for="service3">Service Three</label><br />
</div><!-- end checkbox1 -->
<div id="checkbox2">
<input type=checkbox name="service4" id="service4"><label for="service4">Service Four</label><br />
<input type=checkbox name="service5" id="service5"><label for="service5">Service Five</label><br />
<input type=checkbox name="service6" id="service6"><label for="service6">Service Six</label><br />
</div>
<div id="checkbox3">
<input type=checkbox name="service7" id="service7"><label for="service7">Service Seven</label><br />
<input type=checkbox name="service8" id="service8"><label for="service8">Service Eight</label><br />
<input type=checkbox name="service9" id="service9"><label for="service9">Service Nine</label><br />
</div>
</div><!-- end of wrapper div -->
</body>
</html>
Much less mark-up than with all those spans -easier to change it too. I've put these checkbox groups in a containing div called wrapper. You can control where the three groups appear on the page by shifting the Wrapper div around.
Position:absolute is generally a bad idea for any large chunks of the page. It's not that it can't be used it's just that it has the tendency to cause you more problems than it solves. I have used it for placing a navigation bar but usually I'll use it for smaller things like a "skip link". I definitely wouldn't use it for whole divs - too much trouble!!
My advice would be to:
a. Include a DOCTYPE (there's one on the checkbox.html page you can use)
b. Put all the contents of your page inside a container div and then you can position that much more easily.
c. Leave the checkboxes within the Wrapper div otherwise the floating items will interfere with whatever comes next on the page.
d. Make sure all text has the relevant tags around it - some of your "loose" text needs <p> tags.
e. Don't lose heart - this is a good start and it does get a lot easier!
My plan for your page structure would look like this:
<body>
<div id="container">
<div id="header">
<h1>Badass Tutors</h1>
<p>Get a Badass Tutor</p>
</div><!-- end header div-->
<div id-"main">
<form>
(your main form stuff goes here)
<div id="wrapper">
<div id="checkbox1">
(first lot of checkboxes
</div> <!-- end checkbox 1 div -->
<div id="checkbox2">
(second lot of checkboxes)
</div> <!-- end checkbox2 div -->
<div id="checkbox3">
(third lot of checkboxes)
</div> <!-- end checkbox3 div -->
</div> <!-- end wrapper div -->
<h2>Other stuff</h2>
(other stuff goes here)
</div> <!-- end main div -->
<div id="footer">
(footer stuff goes here)
</div> <!-- end footer div -->
</div> <!-- end container div -->
</body>
