0

Trying to replicate this sort of design/structure: Notice Below the two boxes on one side of the table and the one big one on the other! enter image description here How would I achieve this using table css? Here's my current code, which is vertically stacked:

<body>

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
    <td align="center" valign="top">
        <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
            <tr>
                <td align="center" valign="top">
                    <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailHeader">
                        <tr>
                            <td align="center" valign="top">
                                This is where my body content goes.
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="center" valign="top">
                    <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailBody">
                        <tr>
                            <td align="center" valign="top">
                                This is where my body content goes.
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="center" valign="top">
                    <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailFooter">
                        <tr>
                            <td align="center" valign="top">
                                This is where my body content goes.
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

</body>

Any idea?:

Zorgan
  • 8,227
  • 23
  • 106
  • 207

1 Answers1

1

Steven is right, in theory:

the “correct” way to center a table using CSS. Conforming browsers ought to center tables if the left and right margins are equal. The simplest way to accomplish this is to set the left and right margins to “auto.” Thus, one might write in a style sheet:

  table
 { 
    margin-left: auto;
    margin-right: auto;
 }

But the article mentioned in the beginning of this answer gives you all the other way to center a table.

An elegant css cross-browser solution: This works in both MSIE 6 (Quirks and Standards), Mozilla, Opera and even Netscape 4.x without setting any explicit widths:

  div.centered 
{
    text-align: center;
}

   div.centered table 
 {
     margin: 0 auto; 
     text-align: left;
 }


   <div class="centered">
    <table>
    …
    </table>
 </div>

See this post

edit thats center this is horizontal just change the neccecery css or see here!