Q:

Aligning text symmetrically

I have a 3 column website, the left column is for displaying fixtures. My problem is my text is not aligning the way I want it to as you can see in the image below:

I would like the text to align directly under each other in a symmetrical way, if that makes sense?
The CSS I am using is as follows: 
   //this is for the left box
    #leftbox{
    float:left;
    width:300px;
    height:1000px;
    border-right: 1px dotted #f00;
    border-bottom:none
}

//this is for the fixtures
#fixtures{
    position:relative;
    top: -20px;
}

//this is for the image R in fixtures
#fiximg{
    position:relative;
    top: 5px;
}

Im using a PHP include file called fixtures, so I dont have too change fixtures manually on each page.
<?PHP

echo '<center>';
  echo'<h3>Super Rugby Fixtures & Predictions</h3>';

  //DATE1 COMES HERE           
   echo'<u>Friday 21 February</u>';

    //FIXTURE1 COMES HERE   
echo'<p id="fixtures"><strong>Crusaders vs Chiefs</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 06:35am(SA Time)<BR />';

     //Fixture 2
echo'<p id="fixtures"><strong>Cheetahs vs Bulls</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a>19:05 (SA Time)';
echo'<br>';    
          //DATE2 COMES HERE           
  echo'<u>Saturday 22 February</u>';
echo'<br>';  

      //FIXTURE COMES HERE   
echo'<p id="fixtures"><strong>Highlanders vs Blues</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 08:35am(SA Time)<BR />'; 

    //FIXTURE2
echo'<p id="fixtures"><strong>Brumbies vs Reds</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 10:45(SA Time)<BR />'; 

      //fixture3
echo'<p id="fixtures"><strong>Sharks vs Hurricanes</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 17:05(SA Time)<BR />'; 

    //fixture4
echo'<p id="fixtures"><strong>Lions vs Stormers</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 19:05(SA Time)<BR />';  

       //DATE4 COMES HERE
  echo'<u>Sunday 23 February</u>';  

       //fixture
       echo'<p id="fixtures"><strong>Waratahs vs Force</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 19:05(SA Time)<BR />';    

echo'</center>';

        ?>

Any help will be greatly appreciated.

A:

I like doing these projects just to learn a bit more about HTML/CSS.
This FIDDLE just uses divs (although tables would be OK because it truly is tabular data) in a variety of "holders" that allows you to easily add more lines. Given your PHP requirements, it would also be just as easy to add <?php echo $mydate ?>. There are hundreds of ways to do it, this is just one.
CSS
.holderdiv {
  width: 70%;
}
.datediv {
  float: left;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 10px;
  text-decoration: underline;
}
.gamebox {
  float:left;
  width: 100%;
  height: 30px;
  margin-bottom: 10px;
}
.leftdiv {
  float: left;
  width: 43%;
  height: 30px;
  line-height: 30px;
  text-align: right;
  padding-right: 20px;
  border: 0px solid black;
}
.rightdiv {
  float: left;
  width: 43%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  padding-left: 20px;
}
.logodiv {
    float: left;
    width: 5%;
    height: 30px;
    line-height: 30px;
    background-color: #cccccc;
    border-radius: 5px;
    text-align: center;
}    

