Search code examples
csslayoutcss-floatclearfix

Nested clearfix with fluid width contents

Consider this case:

  • There is a layout with fluid width content, and fixed sidebar floated to the right. Container of said layout is using clearfix to clear right float
  • Inside the content block there is another block doing the same. This second block expands to the height of the sidebar until it clears the float of the sidebar with it's :after { clear: both }

Demo: https://jsfiddle.net/pv6e93px/1/

Example html:

<section class="layout">
  <aside>main sidebar!</aside>
  <div class="wrap">
    <article class="article">
      <header class="header">
        <span class="note">I break stuff!</span>
      </header>
      <div class="content">
        Main content!
      </div>
    </article>
  </div>
</section>

example SCSS:

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

.layout {
  @include clearfix();

  .wrap {
    margin-right: 200px;
    background: gray;
  }

  > aside {
    width: 200px;
    height: 700px;
    float: right;
    background: salmon;
  }
}

.article {
  .header {
    @include clearfix();
    background: green;

    .note {
      display: block;
      float: right;
      background: hotpink;
    }
  }

  .content {
    height: 200px;
    background: red;
  }
}

Expected: enter image description here

Instead got: enter image description here

Does anyone know how to solve this issue whilst NOT restricting content width or using alternative modes of layouting (flexbox, absolute positioning). Extra points for not using overflow: hidden as it cuts any content that is positioned absolutely inside the layout.

Solution

  • You can try adding this:

    .wrap {
  ...
  overflow: hidden;
}

    jsFiddle

    Or, using calc():

    .wrap {
  width: calc(100% - 200px);
  float: left;
}

    jsFiddle