Aligning a table to the very left of a div

Question

I'm trying to make a 2x2 grid, which fills up the entire window in an iPhone, with a table. Currently it looks like this:http://dl.dropbox.com/u/182509/photo.PNG

Note the squshed-uppy-ness of the right column, and the gap at the left.

I cant fix either.

Relevant css:

body { margin: 0; position: absolute; height: 100%; }

.full { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: white; }

table { border-width: 0px; border-spacing: 0px; border-style: hidden; border-color: gray; border-collapse: collapse; background-color: white; width: 100%; height: 100%; left: 0; top: 0px; margin: 0; padding: 0px; position: absolute; }

td { border-width: 1px; padding: 1px; border-style: solid; border-color: gray; background-color: white; width: 50%; height: 160px; }

and html:

<div id="helpView" class="full">
    <table id="help">
        <tr>
            <td>Hey..</td>
            <td>Hi.</td>
        </tr>
        <tr>
            <td>Hello.</td>
            <td>Greetings!</td>
        </tr>
    </table>
</div>

Any help appreciated

Answer 1

Since your td has border set to 1px, it adds to the total width of what we are seeing, so you have to reduce the width of your td. See box model for reference:

http://www.w3.org/TR/CSS2/box.html

or you can set the left of your table to -1 to adjust it to left:

table{left:-1}

it will work since the position is absolute.