Clever Geek Handbook

Clearing after float to left creates a void between two divs

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>

css (breadcrumb and active classes are bootable)

.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 white space has been added between header-bar and breadcrumb html ( see bootply ). How can I remove this white space since there is no padding and margin between them.

+3


source to share


3 answers


Apostolos, the space comes from the class .title

.
Bottom padding 10px.
Zero it and the space will go.



.title {
    padding: 5px 5px 0px 5px;
0


source


The problem is that the computed height of the inner div is .title

greater than the computed height of the container .header-bar

. Properties like height, min-height, border, padding can affect the height, while properties like the display, size and position of the box can indirectly affect the height.

As a result, the inner .title

div discards the next div in the stream by 10px.

CSS has no rules that say that a div should contain its children in height and prevent them from being executed by other divs even when the height is directly defined.We need to tell exactly how it should behave when things turn out to be.



There are several ways to fix this:

  • http://www.bootply.com/Qa1ME2M2uk - use overflow: hidden;

    for parent. Overflow is a css property that is used to control what happens when children are larger than their parents. It's worth noting that depending on other properties, the overflow does not necessarily appear to break the layout.

  • http://www.bootply.com/ssq3EAzeyk - set explicit heights for strict control over element sizes. This might be the best option for a title bar.

  • http://www.bootply.com/yeodYRLLJk - Set a large minimum height for the parent that will definitely contain the child. This is useful if your pad is being used for alignment - the setting min-height: 40px;

    in the example does this.

  • http://www.bootply.com/GznfJxUWUF - remove the padding that makes the element compute as taller (as pointed out in another answer).

+1


source


you need to add float: left

to both the parent container ( .header-bar

and breadcrumb

), or a clear will not affect anything. also, you will need to provide both containerswidth: 100% 

.header-bar {
    border: None;
    background-color: #66CCFF;
    min-height:30px;
    width: 100%;
    float: left;
}

.breadcrumb {
    width: 100%;
    float: left;
}

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


source






More articles:


All Articles