Take the 2-minute tour ×

It is completely beyond me as to why the table within this div is aligned so badly to the right.

<div id="proof_check" style="position:relative; width:577px;  padding:10px; padding-bottom:0px;padding-top:0px; border:3px solid #ccc;  background-color:#fff; z-index:0"> 
<table><tr><td></td><td style='vertical-align:top; padding-left:5px;'><span style='font-weight:bold; color: #295BA7;'>Proof Approval</span><br /></td></tr><tr><td><input type='checkbox' id='proof-approved'></td><td style='vertical-align:top;padding-left:5px;'>I approve of the above design, spelling and layout and understand that my document will print as it appears above and that after placing my order, it cannot be changed.</td></tr><tr valign=bottom><td colspan='2'></td>

This is the way it's turning out to be:

enter image description here

Why on earth is it starting from the middle of the div instead of more on the left?

share|improve this question
it isn't for me - jsfiddle.net/G9Er8 –  Prisoner Jul 3 '13 at 10:51
Please format your code properly. –  Andri Jul 3 '13 at 10:56
add comment

3 Answers

You haven't provided any colspan or width to the columns 'td' of your table. Hence it has divided the table row 'tr' into two equal parts.

Give a colspan element like:

<TABLE STYLE="table-layout:fixed;">
   <COL width="5%"/>
   <COL width="95%">
  ....rest of the code goes here...

Everytime the first column is 5% and the second occupies 95% width.

Hope that helps

share|improve this answer
add comment

The code seems to be fine, the only problem that I could make out was the "position:relative" in your proof_check div, maybe your parent div is causing the problem. Change it to "position:absolute" Hope that solves your problem!

share|improve this answer
add comment

It's because you don't define a width for your first table cell (with the checker box). Set the width of that, and you should be fine... or do it with divs and not tables.

share|improve this answer
add comment

Your Answer


