CODEWITHSUNDEEP
htmlcssalignmenthtml-tablehorizontallist
DBWeinstein
DBWeinstein

Reputation: 9489

getting a horizontal list to align top of html table css

n00b trying to create a simple nav bar at the top of a page. I can't get a horizontal list to align at the top of the table cell.

Specifically, I wan't 'Item 1' and 'Item 2' to align at the top of the table. Ultimately, I want the 'Logo Here' portion all the way to the left and 'items' all the way to the right.

I will, of course, settle for just having the 'items' aligning at the top for now.

html:

    <table cellpadding="0" border="1">
        <tr> 
           <td valign="top">Logo Here</td>
           <td valign="top">Total Accounts:   Logged On:   Last Updated:</td>
           <td>
              <ul id="navlist">
                   <li><a href="#">Item 1</a></li>
                   <li><a href="#">Item 2</a></li>
              </ul>
           </td>
       </tr>
     </table>

css:

    #navlist li
    {
        display: inline;
        list-style-type: none;
        padding-right: 20px;
        vertical-align: text-top;
    }

Upvotes: 0

Views: 4923

Answers (1)

Popnoodles
Popnoodles

Reputation: 28409

We shouldn't be using a table for layout but here's the solution to the question asked.

uls by default have padding and margin. try removing it

#navlist {
    padding:0;
    margin:0;  
    float:right; /* and to get the items to the right */
}

Example: http://jsfiddle.net/vQvvZ/

I have made the table width 100% because you specified " and 'items' all the way to the right."

Upvotes: 2

Related Questions