Why does the div following a floated div overlap the floated one?

Question

I have a floated left sidebar layout with breadcrumbs and main content area on the right.

If you Inspect Element on the breadcrumbsContainer (see jsFiddle), you can see that its left edge is all the way at the left edge of the browser window, but I expected it would be at the right edge of the sidebar.

I see that there are several other similar questions, but I haven't been able to find one yet with the same issue or an answer.

Here is the HTML:

<div>
    <div id="sidebar">
        <div class="menuItem">Users</div>
        <div class="menuItem">Settings</div>
    </div>
    <div class="breadcrumbsContainer">
        Breadcrumbs go here
    </div>
    <div class="main">
    Main content goes here
    </div>
</div>

Here is the CSS:

#sidebar {
    float: left;
    width: 200px;
}

.menuItem {
    height: 60px;
    border-top: 1px solid white;
    background: lightBlue;
}

.breadcrumbsContainer {
    height: 24px;
    background: lightGrey;
}

.main {
    background: #f5f5f5;
    overflow: scroll;
}

jsFiddle

http://jsfiddle.net/LCdwV/2/

Notes

• The following .main div is positioned as I expected.

• While simplifying the situation for my jsfiddle, I discovered that removing the overflow:scroll from the .main div caused it to behave like the breadcrumbsContainer.

• Conversely, adding overflow:scroll (overflow:hidden) to the breadcrumbsContainer caused its bounding box to adjust to where I expected it to be.

Questions

1. Why does the bounding box of breadcrumbsContainer not start where I expect, and yet the text contained in the breadcrumbsContainer is pretty much where I expect it to be?

2. What is the "right way" to setup a layout like this so that the breadcrumbsContainer and .main div don't overlap the sidebar, but also resize as the browser window resizes?

I could do it easily with absolute positioning and the jQuery resize() event, but it seems like it should be possible without that.

Thanks.

Answer 1

float removes an element from the normal flow, meaning that neighboring elements are positioned as if the float didn't exist (which is why .breadcrumb-container is overlapping .. it ignores the box of its sibling).

This isn't the case if an element has an inline display.

Since the text is inline, it respects the presence of this float, and thus is placed flush against its right edge - this is the intended behaviour since text was meant to wrap around floated elements.

Answer 2

I checked your code and here's my solution:

you cannot let the next div after you had a float: left rule to not having float rule. for example like your next div class is breadCrumbsContainer. It has no float rule. So, you need to define float: left for .breadCrumbsContainer and main. But there is an issue with the width of the div, it will fits to its content.

I recommend you to add your layouting rule first. so it looks like this :

#sidebar {
    float: left;
    width: 20%;
}

.menuItem {
    height: 60px;
    border-top: 1px solid white;
    background: lightBlue;
}

.breadcrumbsContainer {
    float: left;
    width: 80%;
    height: 24px;
    background: lightGrey;
}

.main {
    float: left;
    width: 80%;
    background: #f5f5f5;
    overflow: scroll;
}

Otherwise, you can also set your sidebar position to be absolute and you can create a div to wrap your main content

CSS :

#sidebar {
    position: absolute;
    width: 200px;
}
.main-container{
    position: relative;
    left: 200px;
}
.menuItem {
    height: 60px;
    border-top: 1px solid white;
    background: lightBlue;
}

.breadcrumbsContainer {
    height: 24px;
    background: lightGrey;
}

.main {
    background: #f5f5f5;
    overflow: scroll;
}

HTML :

<div>
    <div id="sidebar">
        <div class="menuItem">Users</div>
        <div class="menuItem">Settings</div>
    </div>
    <div class="main-container">
        <div class="breadcrumbsContainer">
            Breadcrumbs go here
        </div>
        <div class="main">
        Main content goes here
        </div>
    </div>
</div>

It's very recommended to look at bootstrap framework