HTML and CSS button alignment

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

---

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.

---

.navContainer { text-align: right; }

---

@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".