Question

I have a table with one row and 2 columns. I have two menus that I would like to put in 1 column. One to the top and the second to the bottom. The valign doesn’t work, I cant figure out how to make it work, the text in the second td can change so if it grows the second menu should be pushed to the bottom,

Please see my current code below:

<table>
  <tr>
     <td>
      <table>
       <tr>
        <td  valign="top">
          <div class="left">
                <ul>
                   <li><a href="#">one</a></li>
                   <li><a href="#">two</a></li>
                   <li><a href="#">three</a></li>
                </ul>                                     
         </div>
         </td>
        </tr>
        <tr>
         <td valign="bottom">
           <div class="left">
               <ul>
                  <li><a href="#">four</a></li>
                  <li><a href="#">five</a></li>
              </ul>        
           </div>
         </td>
      </tr>
     </table>
    </td>
    <td valign="bottom">
       <div>
       some text here
    </div>
   </td>
 </tr>

Answer 1

There is nothing wrong with your code

try to add border=”1″ on all table tag. <table border ="1"> you” figure it out

try to valign your last <div>

or colspan on your specified <td>

new updated with this code will makes:

<table border="1">
  <tr>
     <td>
      <table border ="1">
       <tr>
        <td  valign="top">
          <div class="left">
                <ul>
                   <li><a href="#">one</a></li>
                   <li><a href="#">two</a></li>
                   <li><a href="#">three</a></li>
                </ul>                                     
         </div>
         </td>
        </tr>
        <tr>
         <td valign="bottom">
           <div class="left">
               <ul>
                  <li><a href="#">four</a></li>
                  <li><a href="#">five</a></li>
              </ul>        
           </div>
         </td>
      </tr>
     </table>
    </td>
    <td valign="bottom" style="display:block; margin-left:auto; margin-right: auto;">
        <div>
       some text here some text here some text here some text here some text here some text here some text here some text here 
        </div>
   </td>
 </tr>