CODEWITHSUNDEEP
htmlcsspositioning
JJJollyjim
JJJollyjim

Reputation: 6207

Aligning a table to the very left of a div

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

Upvotes: 1

Views: 3435

Answers (2)

kazinix
kazinix

Reputation: 30093

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.

Upvotes: 2

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

You've overcomplicated things.

http://jsfiddle.net/Z3rs5/

You should write simple code, also, do't cram all of the CSS statements in one row, every time you do that, God kills a kitten!

Upvotes: 0

Related Questions