CODEWITHSUNDEEP
htmlcss
Fred Langemark
Fred Langemark

Reputation: 140

White Space Following float: left and clear: both

I am using float: left to stack two divs side by side. I am then using clear: block to clear the float, but a small white space appears between the floated divs and the next div.

undesired whitespace

I have added overflow: none to every element on the page because I saw that as the solution that worked for other people with a similar issue, but that didn't fix the issue.

#featured-container {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: -60px;
}

#featured-header {
    display: inline-block;
    width: 240px;
    height: 30px;
}

#featured-label {
    float: left;
    width: 160px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #EEEEEE;
    font-weight: 700;
}

#featured-point {
    float: left;
    width: 0;
    height: 0;
    border-bottom: 30px solid #EEEEEE;
    border-right: 30px solid transparent;
}

#featured {
    display: inline-block;
    width: 220px;
    min-height: 220px;
    padding: 10px;
    background: #EEEEEE;
}

.clear {
    clear: left;
}
<div id="featured-container">
    <div id="featured-header">
        <div id="featured-label">FEATURED</div>
        <div id="featured-point"></div>
    </div>
    <div class="clear"></div>
    <div id="featured">

    </div>
</div>

EDIT: I know I can add a negative margin-top to the '#featured' box, but I would really like to understand why this problem exists.

Upvotes: 0

Views: 190

Answers (2)

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Set font-size: 0; on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.

#featured-container {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 0px;
    font-size:0px;
}

#featured-header {
    display: inline-block;
    width: 240px;
    height: 30px;
}

#featured-label {
    float: left;
    width: 160px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #EEEEEE;
    font-weight: 700;
    font-size:18px;
}

#featured-point {
    float: left;
    width: 0;
    height: 0;
    border-bottom: 30px solid #EEEEEE;
    border-right: 30px solid transparent;
}

#featured {
    display: inline-block;
    width: 220px;
    min-height: 220px;
    padding: 10px;
    background: #EEEEEE;
    font-size:16px;
}

.clear {
    clear: left;
}
<div id="featured-container">
    <div id="featured-header">
        <div id="featured-label">FEATURED</div>
        <div id="featured-point"></div>
    </div>
    <div class="clear"></div>
    <div id="featured">

    </div>
</div>

Upvotes: 0

Hilal Arsa
Hilal Arsa

Reputation: 171

Try changing the inline-block to inline-flex

#featured-header {
    display: inline-flex;
    width: 240px;
    height: 30px;
}

Upvotes: 1

Related Questions