Question

I have a left sided menu like this:

    <table table-layout="fixed" width="800px">
        <tr valign="top">
            <td width="140px" overflow="hidden">
                 <div class="link-list">
                    <ul class="tablist">
                        <li> <a href="/url1/">Short</a> </li>
                        <li> <a href="/url2/">MediumItem</a> </li>
                        <li> <a href="/url3/">ThisIsALongWidthItem</a></li>
                    </ul>
                </div>
            </td>  
            <td>
                  the page main content here                                        
            </td>      
        </tr>   
    </table>

The CSS is like this:

.tablist 
{
list-style:none; 
height:2em;
padding:0; 
margin:0; 
border: none;
white-space:nowrap;
}

.tablist li 
{
float:left; 
margin-right:0.13em;     
}

.tablist li a 
{
display:block;
padding:0.5em 3em;    /*I'm trying to set this value*/
text-decoration:none;
border:0.06em solid #000;
border-bottom:0;
}

I want to make items to fill the whole width of the left column. when setting padding to small value, they leave space at right side because items have different width. So I’m trying to set it to big value (hopping that it can fill the empty space) but they exceed the column margins and get mixed with the contents of the right side col.
How can I make it delimited to the column width??

Answer 1

You can put a max-width on the li to make sure it doesn’t go further that it’s parent container.

max-width: 100%;

I’m not sure if this is what you mean though. It would be best if you could set up a JSFiddle to mimic the problem.

It looks like you may be fighting an issue between using both the li and the a for width.