 <p>I had to read your post multiple times to try to get what you were looking for. If I'm reading you correctly, what you want is the first <code>&lt;a&gt;</code> tag to act as a <code>display:block</code> so that when you hover over it the entire width is clickable, but you want the second <code>&lt;a&gt;</code> tag to float to the right on the same line.</p> <p>I believe that <a href="http://jsfiddle.net/Arwxh/" rel="nofollow"><strong>this demo</strong></a> will accomplish what you wish. I changed the order of the anchor links to make it as easy as possible. Also added background colors so you could see what's going on.</p> <pre><code>&lt;li class="file"&gt;&lt;a href="" class="delete"&gt;Delete&lt;/a&gt;&lt;a href=""&gt;Long Link Name&lt;/a&gt; </code></pre> <p>The CSS required would be:</p> <pre><code>ul.tree li { list-style: none; padding: 0px; padding-left: 20px; margin: 0px; white-space: nowrap; } ul.tree a { color: #111; text-decoration: none; display: block; padding: 0px 2px; background-color: gold; //so you can see what's happening } ul.tree .delete { background-color: lightgreen; //so you can see what's happening margin: 0 0 0 5px; display: inline; float: right; } ul.tree a:hover { background-color: lightblue; //so you can see what's happening } .tree li.directory { background: url(/images/directory.png) left top no-repeat; } .tree li.file { background: url(/images/file.png) left top no-repeat; } </code></pre> <p>If changing the order of the anchors is out of the question, I could muck around with some more elaborate CSS, but as the complexity of the CSS increases, so do your chances of it breaking in one browser or the other. </p> <hr> <p><strong>EDIT:</strong> Based on your reply, I've created some CSS to add an ellipsis (…) when the link text is too long. It requires setting a width on the main <code>&lt;ul&gt;</code>, but from your initial question it sounds like you're doing that anyway. You can see the <a href="http://jsfiddle.net/Arwxh/5/" rel="nofollow">updated JSFiddle here</a>, and here's the updated CSS:</p> <pre><code>ul { width: 333px; } ul ul { width: inherit; } a { overflow: hidden; text-overflow: ellipsis; } ul.tree li { list-style: none; padding: 0px; padding-left: 20px; margin: 0px; white-space: nowrap; } ul.tree a { color: #111; text-decoration: none; display: block; padding: 0px 2px; background-color: gold; //so you can see what's happening } ul.tree .delete { background-color: lightgreen; //so you can see what's happening margin: 0 0 0 5px; display: inline; float: right; } ul.tree a:hover { background-color: lightblue; //so you can see what's happening } .tree li.directory { background: url(/images/directory.png) left top no-repeat; } .tree li.file { background: url(/images/file.png) left top no-repeat; } </code></pre> <p><a href="http://jsfiddle.net/Arwxh/" rel="nofollow"><strong>Original Fiddle</strong></a> | <a href="http://jsfiddle.net/Arwxh/5/" rel="nofollow"><strong>Fiddle with long links</strong></a></p>