Question

I am trying to get a button to appear above an unordered list, and I want it right justified. With CSS style “float:right”, it appears on the right, but it is overlapping the list. How can I get the button to appear on the right without overlapping the list?

Code:

<style>
.mylist { list-style-type: none; width: 100%; }
.mylist li { margin: 2px; padding: 2px; border: 1px solid black;}
</style>

<button style="float:right; display:block;">Preview</button>
<UL class='mylist'>
    <LI>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</LI>
    <LI>Test</LI>       
</UL>

Answer 1

Add clear:both to mylist style.
Demo: http://jsfiddle.net/JgeTm/

CSS

.mylist{list-style-type:none;width:100%;clear:both}