Question

I don’t really understand why my float: right; div is below container div. I have no idea how to fix this. Can someone please explain? I had this problem long time ago on another website, but totally forgot how I managed to fix it if I did it at all. I want it to be inside the container of course.

    <div id="menu">
        <div class="categories"></div>
        <img class="logo" src="#" />
        <div class="thumb"></div>
    </div>

–

#menu
{
    width: 960px;
    height: 70px;
    margin: auto;
    background-color: blue;
}

#menu .thumb
{
    background-color: aqua;
    float: right;
    height: 60px;
    width: 400px;
}

Answer 1

You should read this web page: https://css-tricks.com/all-about-floats/

The most important part is this:

The Great Collapse

One of the more bewildering things about working with floats is how they can affect the element that contains them (their “parent” element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing.

You can usually fix this by adding a “clearing” div at the end of your container, like this:

<div id="menu">
    <div class="categories"></div>
    <img class="logo" src="#" />
    <div class="thumb"></div>
    <div style="clear: both;"></div>
</div>