Aling two elements in different table rows so that their start position is same

Question

I have a masterpage in which their is a table with 3 rows. The first row is for header 2nd for body and 3rd for footer. The header row again contains a table with 1 row and 3 columns. the first col width is fixed to 238 px while the last col is fixed as 7% width. and the middle col occupies all left space.

the second row also contains 3 cols with 1st col = 20% and 3rd col = 20% and middle occupies the rest.

The problem:- I have to aling the the middle col of both the table in a way that inner content start from same horizontal position.

here is a sample of the html with the required style

<html xmlns="http://www.w3.org/1999/xhtml">

.style1 { width: 100%; }

<div align="center">
    <table align="center" class="style1">
        <tr>
            <td>
                <div align="center">
                    <table align="center" class="style1">
                        <tr>
                            <td width="238px">
                                Logo width = 238px</td>
                            <td align="center">
                                <div style="background-color: #008000">
                                    start line should aling with the below start line</div>
                            </td>
                            <td width="7%">
                                cart width =7%</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div align="center">
                    <table align="center" class="style1">
                        <tr>
                            <td width="20%">
                                &nbsp;</td>
                            <td align="center">
                                start line should aling with the top</td>
                            <td width="20%">
                                &nbsp;</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

I need to aling 'start line'(in div with bgcolor = green and in td ) so that they start from the same position.

navin2013 navin2013 · Accepted Answer · 2013-09-28T07:44:13

<div align="center">
    <table align="center" class="style1">
        <tr>
            <td>
                <div align="center">
                    <table align="center" class="style1">
                        <tr>
                            <td width="238px">
                                Logo width = 238px</td>
                            <td style="padding-left:50px; background-color: #008000">
                                    start line should aling with the below start line
                            </td>
                            <td width="7%">
                                cart width =7%</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div align="center">
                    <table align="center" class="style1">
                        <tr>
                            <td width="238px">
                                &nbsp;</td>
                            <td style="padding-left:50px;">
                                start line should aling with the top</td>
                            <td width="20%">
                                &nbsp;</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

use padding instead of align="center"

Aling two elements in different table rows so that their start position is same

2 Answers