Question

Here is my code:

<form id="form1" style="height: 800px; width:1000px" >
<table style="width: 90%; height: 193;">
    <tr>
        <td class="style4">
            <table style="width: 100%; height: 701px;">
                <tr>
                    <td style="height: 587px; width: 629px;" colspan="4" >
                        <div id="tableTree" style="height:600px;">
                            <table style="width: 150px;">
                                <div id="treeboxbox_tree" style="width:280px; height:100%; ">
                </div>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td >
                        <input type="button" value="Add" id="btnAdd" onclick="return someMethod()" />
                    </td>
                    <td >
            //other button
                    </td>
                    <td >
            //other button
                    </td>
                </tr>
            </table>
        </td>

        <div>
            <td>
                <table width="100%" id="smth">
                    <div style="float:left"><%Html.RenderPartial("Something"); %></div>
                </table>
            </td>
        </div>

    </tr>
</table>
</form>

And smth is not shown until I click on a button. But since smth has very large height, the td which has style4 goes down, where the middle of smth is. It is very frustrating. How to resolve it?

Answer 1

I think you mean the vertical alignment is off in the td?

<td class="style4">

Change it to

<td class="style4" valign="top">

Or add to style4

vertical-align: top;

Not sure which version of html you are defining…