Div trouble

[esoteric]

Can anyone see a problem with this? I'm trying to align 3 div's next to each other, the left and center is fine but the right is too far down, the top is approx at the bottom of the other 2. I can't understand why it isn't lining up. They should all appear at the top.

 

<div id="newswrapper">
  	<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    	<tr>
    	<?php 
	xxx
?>
        <td align="center">
                
        <div id="newsleft">
        <table width="100%">
        <tr>
          <td><span class="headline"><span class="featuredescription"><span class="checkout"><a href="<?php echo $row['frag1Link']; ?>"><img src="<?php echo $row['frag1Image']; ?>" alt="" width="300" height="100"/></a></span></span></span></td>
        </tr>
        <tr>
          <td align="center"><span class="headline"><?php echo $row['frag1Title']; ?>test</span></td>
        </tr>
        <tr>
          <td align="center"><span class="headline"><span class="featuredescription"><?php echo $row['frag1Description']; ?>test</span></span></td>
        </tr>
      	</table>
    	</div>
    
    	<div id="newscenter">
        <table width="100%">
        <tr>
          <td align="center"><span class="headline"><?php echo $row['frag1Title']; ?>test</span></td>
        </tr>
        <tr>
          <td align="center"><span class="headline"><span class="featuredescription"><?php echo $row['frag1Description']; ?>test</span></span></td>
        </tr>
        <tr>
          <td><span class="featuredescription"><span class="checkout"><a href="<?php echo $row['frag1Link']; ?>"><img src="<?php echo $row['frag1Image']; ?>" alt="" width="300" height="100"/></a></span></span></td>
        </tr>
      	</table>
    	</div>
        
        
    	<div id="newsright">
        <table width="100%">
        <tr>
          <td><span class="featuredescription"><span class="checkout"><a href="<?php echo $row['frag1Link']; ?>"><img src="<?php echo $row['frag1Image']; ?>" alt="" width="300" height="100"/></a></span></span></td>
        </tr>
        <tr>
          <td align="center"><span class="headline">test<?php echo $row['frag1Title']; ?></span></td>
        </tr>
        <tr>
          <td align="center"><span class="featuredescription">test<?php echo $row['frag1Description']; ?></span></td>
        </tr>
      	</table>
    	</div>
        </td>
    	</tr>
  	</table>
  	</div>
  	<? 
} 
?>

 

my css

#newsleft {
padding-top: 50px;
float:left;
width:330px;
margin: auto;
}
#newscenter {
float: center;
width: 330px;
margin: auto;
}
#newsright {
padding-top: 50px;
float:right;
width:330px;
margin: auto;
}

 

Thank you.

[JasonLewis]

Perhaps because the containing width is smaller then the total width of all 3 boxes combined?

 

This has nothing to do with PHP either. The CSS section would be a much better place for this.

[esoteric]

Sorry about the wrong section. The container is larger than the 3 divs. I even changed there width to 33% just in case. The right div is still too far down.

 

Could a mod move this please! thanks

[JasonLewis]

I see you're trying to use float: center. There is no such thing, you can use either left or right. I suggest you set them all to float: left.

[esoteric]

I have no idea why but setting them all to float left seems to have worked. And i have no idea center didnt exist, well that sorted it anyway so thank you very much sir.