display buttons on the same line at opposite sides of the page

folfos

New Member
I have left and right buttons that I want to display as navigation buttons at the top and bottom of some content on a page like this:\[code\]<div style="float: right;"> <button class="right">Right button</button></div><div> <button class="left">Left button</button></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis faucibusfeugiat. Suspendisse felis tortor, sodales quis scelerisque a, malesuada lobortis erat.Etiam vel lectus vitae nulla imperdiet dapibus. Curabitur accumsan pretium viverra. Vivamus sit amet gravida ante. Aenean elit lorem, aliquet porta sollicitudin non, elementum aliquam massa. Ut magna arcu, malesuada lacinia rutrum ornare, accumsan sed eros.</p><div style="float: right;"> <button class="right">Right button</button></div><div> <button class="left">Left button</button></div>\[/code\]The problem I have (as seen here) is that if I only have my right buttons but not my left buttons, using float floats the button to the right of my paragraph (which is normal because that's what comes after the button), but if I use text-align: right instead of float right, everything works fine. Is there a better way I can do this without having to check for conditions to see if my left buttons exist and change my float to text-align?Thank you
 
Top