CSS ::after pseudo element clear not working

Question

Here is a fiddle: http://jsfiddle.net/e4y05yyz/1/

Working on a responsive layout. I would expect that the :after pseudo element would clear both floats and the the element with class .masthead-middle would drop to the next line, but it does not. If I put a clear: both; on the masthead-middle element that works, and I can do that, but I don't understand why the float is not clearing based on the :after. The after pseudo element will be added using a media query, but I can't get it to work in "standard" css.

Here is the HTML:

<header>
    <div class="header-inner">
        <div class="masthead">
            <div class="masthead-inner">
                <div class="masthead-left">LEFT</div>
                <div class="masthead-right">RIGHT</div>
                <div class="masthead-middle">MIDDLE</div>
            </div>
        </div>
    </div>
</header>

CSS:

header {
    position: relative;
    width: 100%;
    padding-top: 10px;
}
header .header-inner {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 10px;
}
header .masthead {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
header .masthead .masthead-inner {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
header .masthead .masthead-left {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    float: left;
    text-align:left;
    width: auto;
    padding-right: 15px;
    overflow: hidden;
}
header .masthead .masthead-right {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    float: right;
    width: auto;
    padding-left: 15px;
    overflow: hidden;
}

header .masthead .masthead-right:after {
    content: "";
    display: table;
    clear: both;
}

header .masthead .masthead-middle {
    box-sizing: border-box;
    width: auto;
    overflow: hidden;
}

Answer 1

here is a answer with a snippet to illustrate my comment

 header { position: relative; width: 100%; padding-top: 10px; } header .header-inner { width: 100%; box-sizing: border-box; margin: 0 auto; padding: 0 10px; } header .masthead { position: relative; width: 100%; box-sizing: border-box; } header .masthead .masthead-inner { position: relative; width: 100%; box-sizing: border-box; overflow: hidden; } header .masthead .masthead-left { position: relative; display: inline-block; box-sizing: border-box; float: left; text-align:left; width: auto; padding-right: 15px; overflow: hidden; } header .masthead .masthead-right { position: relative; display: inline-block; box-sizing: border-box; float: right; width: auto; padding-left: 15px; overflow: hidden; clear:left } div { box-shadow:0 0 0 1px; } header .masthead .masthead-middle { box-sizing: border-box; width: auto; overflow: hidden; background:yellow }

 <header> <div class="header-inner"> <div class="masthead"> <div class="masthead-inner"> <div class="masthead-left">LEFT</div> <div class="masthead-right">RIGHT</div> <div class="masthead-middle">MIDDLE</div> </div> </div> </div> </header>

add width:100% to see right taking all width avalaible

 header { position: relative; width: 100%; padding-top: 10px; } header .header-inner { width: 100%; box-sizing: border-box; margin: 0 auto; padding: 0 10px; } header .masthead { position: relative; width: 100%; box-sizing: border-box; } header .masthead .masthead-inner { position: relative; width: 100%; box-sizing: border-box; overflow: hidden; } header .masthead .masthead-left { position: relative; display: inline-block; box-sizing: border-box; float: left; text-align:left; width: auto; padding-right: 15px; overflow: hidden; } header .masthead .masthead-right { position: relative; display: inline-block; box-sizing: border-box; float: right; width: 100%; padding-left: 15px; overflow: hidden; clear:left } div { box-shadow:0 0 0 1px; } header .masthead .masthead-middle { box-sizing: border-box; width: auto; overflow: hidden; background:yellow }

 <header> <div class="header-inner"> <div class="masthead"> <div class="masthead-inner"> <div class="masthead-left">LEFT</div> <div class="masthead-right">RIGHT</div> <div class="masthead-middle">MIDDLE</div> </div> </div> </div> </header>

Answer 2

clear: both on ::after pseudo-element is used in order to clear the floats (of children) at the end of the parent element.

If you want to prevent an element from wrapping the floats, you should give clear: both declaration to the element itself.