Formatting tabs HTML PHP CSS - php

Question

I've been away from programming in general for a long time. Amazing how you forget the simplest things. So I'm trying to warm-up my web design/PHP by making a resume generator.
I made my resume in Word, and I want to try to mimic the document formatting.
I tried doing this with tables, and then I scraped that because it wasn't working exactly like I wanted, and now I'm using divs and spans.
But that's breaking the formatting even more so I don't know what to do...
My main problem is getting spaces to line up precisely the way tabs do in Microsoft Word, on the same line as other things.
Here is the code I'm using
function fieldFill($fieldL, $fieldR = 'NoneAtAll'){
$numOfSpaces = 50;
echo '<div class="left">' . $fieldL . '</div>';
//if ($fieldR != 'NoneAtAll'){
// for($i = 0; $i <= $numOfSpaces - strlen($fieldL); $i++){
// echo '&nbsp';
// //echo $i;
if ($fieldR != 'NoneAtAll'){
for($i = 0; $i <= $numOfSpaces; $i++){
echo '&nbsp';
}
echo '<span class="rightt">' . $fieldR . '</span>';
echo '<br></br>';
}
}
And here is the CSS section
<style>
.rightt {margin: 0 0 0 300px;}
.name { font-size: 22pt;}
.sections {
padding: 15px 0px 0px 0px;
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
}
.years {
font-size: 12pt;
font-weight: bold;
/*white-space:pre*/
}
.jobtits {
font-size: 12pt;
font-weight: bold;
}
</style>
I know there's already good resume generators out there but I'm doing this for the practice. Thanks
Here we go, I want to mimic this format
As of today I'm finding that this code
<div id="page-container">
<div id="leftside">
<div class="name">Name</div>
Address
<br>
City
<br>
State
<div class="sections">Objective</div>
To do good stuff!
<div class="sections">Education</div>
A college
<div class="sections">Awards</div>
Did some good stuff
<div class="sections">Job Experience</div>
<div class="jobtits">Some place</div>
Was an editor
<div class="jobtits">Another place</div>
Did stuff there too.
<div class="sections">Skills</div>
</div>
<div id="rightside">
<div class="name">That's my name</div>
Mobile: [phone]
<br>
Home: 334-223-3244
<br>
Email: Email#me.com
<div class="sections">Filler</div>
Filler
<div class="sections">Filler</div>
2012-1030
<div class="sections">Filler</div>
Filler
<div class="sections">Job Experience</div>
<div class="jobtits">Jul 00 - 32</div>
Filler
<div class="jobtits">Everybody's heard</div>
About the bird.
<div class="sections">Skills</div>
</div>
</div>
is working for the most part, but there are still parts that need to overlap, such as the objective line. I probably need to make a new div/table for that huh? I'm walking through the html static before making it dynamic.

Answer 1

SPAN tag is inline element so margin will not be appled to it, use DIV tag instead.