CODEWITHSUNDEEP
htmlcsscss-float
user765368
user765368

Reputation: 20346

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

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:

<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 faucibus
feugiat. 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>

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

Upvotes: 0

Views: 4137

Answers (2)

Nik Drosakis
Nik Drosakis

Reputation: 2348

Don't use float:right, it's ok with

<div style="text-align: right;clear:left;">

Upvotes: 1

Alfred Xing
Alfred Xing

Reputation: 4632

If you put

p {
    float: none;
    clear: both;
}

that should fix it: http://jsfiddle.net/P2rNC/2/

Upvotes: 0

Related Questions