Float:left, div falling by the width of the div

Question

I have a problem with float:left;: for a width greater than the page a div fell, but I wanted it to continue div previous.

HTML:

<div id="menu" class="menu">
    MENU
</div>
<div class="resto">
    RESTO DO CONTEUDO
</div>

CSS:

.menu {
    width: 250px;
    float: left;
    position: blocked;
    background-color: blue;
}

.resto {
    background-color: #ccc;
    width: 100%;
    float: right;
}

Result on the Jsfiddle.

Answer 1

You don’t need the overflow: hidden;, removing the width and the float: right; she’s already going to the same line.

The good would be for you to put a width on the two div's and leaves them in a bloc to avoid conflicts with elements below them.

See the code on Jsfiddle

With this you create blocks in your code and prevent elements below them to "break" the page.

Good studies!

Answer 2

It seems to me you want to put the div fixed on the line. You were missing the property overflow: hidden; who does just that.

Fiddle edited