float: right - Why below container?

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;
}

What's the CSS for the categories div and logo image? – Anders Fjeldstad Jun 27 '11 at 14:02 — Anders Fjeldstad, Jun 27 '11 at 14:02

score 24 · Accepted Answer · edited Apr 11 '19 at 13:45

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>

score 4 · Answer 2 · edited May 23 '17 at 12:02

When you float an element, it loses all height. Therefore, the container does not know to expand to contain it. You must give the container a height large enough to contain the floated element.

Alternately, you can include a clearing div just below your floated element. This is the "so-called" clearfix, and will force the container to contain the floated element as expected.

To add a clearing div, you can add the following to your markup:

    <div class="thumb"></div>
    <div class="clearfix">&nbsp;</div> <!-- Add this line -->
</div>

and in your CSS:

.clearfix {
  clear: both;
  font-size: 1px;
}

score 2 · Answer 3 · answered Jun 27 '11 at 14:12

float: right; will move the element to the right of the non-floating elements after it (I am talking about HTML markup). See if this works:

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

score 0 · Answer 4 · answered Jun 27 '11 at 15:21

0

Use floats for all your main divs, and have overflow: hidden for your #container

answered Jun 27 '11 at 15:21

creativeedg10

691
1
11
24

float: right - Why below container?

4 Answers4