Layout with fixed and fluid columns and transparent floats

Question

I need to create a two-column layout using

• Left column with fixed and right column;
• Each column has a window with a head (with tabs and menus) and a body.

The Fixed / Fluid macro works, but in the right column there is a space between div divs (tabs) and body divs (window body 2) :

I created a Fiddle example: http://jsfiddle.net/4sk3bkde/

The problem occurs when I use the .clear class to clear the float:

.clear:after {
  content: "";
  display: table;
  clear: both;
}

HTML code:

<div class="wrapper clear">

  <div class="fixed">

    <div class="window">
      <div class="head clear">
        <ul class="tabs clear">
          <li>Tab 1</li>
          <li>Tab 2</li>
        </ul>
        <a class="menu" href="#">Menu</a>
      </div>
      <div class="body">
        Body of window 1
      </div>
    </div>

  </div>

  <div class="fluid">

    <div class="window">
      <div class="head clear">
        <ul class="tabs clear">
          <li>Tab 1</li>
          <li>Tab 2</li>
        </ul>
        <a class="menu" href="#">Menu</a>
      </div>
      <div class="body">
        Body of window 2
      </div>
    </div>

  </div>

</div>

And CSS code:

.clear:after {
  content: "";
  display: table;
  clear: both;
}

.fluid,
.fixed {
  border: 1px solid black;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.fixed {
  float: left;
  width: 250px;
}

.fluid {
  margin-left: 250px;
}

div.window {
}

div.head {
  border: 1px solid red;
}

ul.tabs {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

ul.tabs li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

a {
  display: inline-block;
  float: right;
}

Why am I getting this problem when using clear? How to solve this?

Answer 1

, , .

, , display inline-block, inline-table

.clear:after {
  content: "";
  display: inline-block;
  clear: both;
}

, , display table.

.clear:after {
  content: "";
  display: inline-table;
  clear: both;
}

.fluid,
.fixed {
  border: 1px solid black;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.fixed {
  float: left;
  width: 250px;
}

.fluid {
  margin-left: 250px;
}

div.window {
}

div.head {
  border: 1px solid red;
}

ul.tabs {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

ul.tabs li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

a {
  display: inline-block;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.5.2/mootools-core-compat.min.js"></script>
<div class="wrapper clear">

  <div class="fixed">

    <div class="window">
      <div class="head clear">
        <ul class="tabs clear">
          <li>Tab 1</li>
          <li>Tab 2</li>
        </ul>
        <a class="menu" href="#">Menu</a>
      </div>
      <div class="body">
        Body of window 1<br>
        Body of window 1<br>
        Body of window 1<br>
        Body of window 1<br>
        Body of window 1<br>
      </div>
    </div>

  </div>

  <div class="fluid">

    <div class="window">
      <div class="head clear">
        <ul class="tabs clear">
          <li>Tab 1</li>
          <li>Tab 2</li>
        </ul>
        <a class="menu" href="#">Menu</a>
      </div>
      <div class="body">
        Body of window 2<br>
        Body of window 2<br>
        Body of window 2<br>
        Body of window 2<br>
        Body of window 2<br>
        
      </div>
    </div>

  </div>

</div>

Answer 2

float . https://goo.gl/I6nLss Bcoz ,