clearing after a float left creates a void between two divs

Question

I have the following part of my html

<div class="header">            
    <div class="header-bar">
        <div class="pull-left">
            <div class="title">Ci models database</div>
        </div>
    </div>              
    <div class="clear-both"></div>
    <ol class=breadcrumb>
        <li class="active"><a href="#">All models</a></li>
    </ol>
</div>

the css(breadcrumb and active classes are bootstrap)

.header-bar {
    border: None;
    background-color: #66CCFF;
    min-height:30px;
}

.title {
    padding: 5px 5px 10px 5px;
    color: white;
    font-size: large;
}
.clear-both{
    clear:both; 
}

But between header-bar and breadcrumb html added a white space(see bootply). How can I remove this white space, since no padding and margin can be found between to divs.

Answer 1

The problem is that the calculated height of the internal .title div is greater than the calculated height of the container .header-bar. Properties like height, min-height, border, padding can directly effect heights, whereas properties like display, box-sizing and position can all indirectly effect height.

The result is the internal .title div pushes down the next div in the flow by 10px.

CSS has no rules that say a div must contain it's children in height and stop them from effecting other divs, even when height is directly defined. We need to tell it exactly how it should behave when things are rendered.

There are several ways to fix this:

1. http://www.bootply.com/Qa1ME2M2uk - use overflow: hidden; on the parent. Overflow is a css property which is used how to control what happens when child elements are larger than their parents. It's worth noting that depending on other properties overflow won't necessarily render itself in a way that disrupts layout.

2. http://www.bootply.com/ssq3EAzeyk - set explicit heights to take strict control over the dimensions of the elements. This might be the best option for a header bar.

3. http://www.bootply.com/yeodYRLLJk - set a greater min-height on the parent, one which will definitely contain the child. This is useful if your padding is for alignment purposes - setting min-height: 40px; in the example does this.

4. http://www.bootply.com/GznfJxUWUF - remove the padding that is making the element calculate as taller (as mentioned in another answer).