HTML and CSS button alignment

Question

How can I right align a button inside a div without wiping it from the Markup Flow with valid CSS and HTML? Is applying margin-leftthe only way to do this?

I have a structure like this

<div class="navContainer">
    <div class="title">
        <span>Nav Titulo</span>
    </div>
    <div class="navContent">
        Nav Conteudo
    </div>
    <button type="button">Enviar</button>
</div>

<div class="navContainer">
    <div class="title">
        <span>Nav Titulo</span>
    </div>
    <div class="navContent">
        Nav Conteudo
    </div>
</div>

If I apply button { float: right } or button { position: absolute } the next div will get over the button. It happens that I just want to make the button position at the right side

Answer 1

what you want to read up on is clearing

if you have floated elements, they go out of page flow, but any element with clear:both will stay in page flow, but not allow anything on either side of it, floated or not.

in practice, adding a clear:both element after you floats makes things work the way you want them to.

Answer 2

.navContainer { text-align: right; }

Answer 3

@Matt is right. What you need to do is clear the div elements.

.navContainer {clear: both}

If you want your button aligned at the top of the containing div, you might have to move it before your div element of class "title".