HTML and CSS buttons alignment

Question

How can I correctly align a button inside a div without wiping it from the markup stream with valid CSS and HTML? Is using margin-left the only way to do this?

I have such a structure

<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 applied button { float: right }or button { position: absolute }, the next divwill go through the button. It happens that I just want to make the button position on the right side

Answer 1

what you want to read, clearing

, , : , , .

, : , , , .

Answer 2

.navContainer { text-align: right; }

Answer 3

@ Matt is right. You need to clear the div elements.

.navContainer {clear: both}

If you want your button to be aligned at the top of the containing div, you may need to move it in front of your div element of the "title" class.