Inner Div Pushing Outer Div

I've been trying to figure out this puzzle for the longest time. I'm trying to simulate a traditional HTML table tree structure using divs with table, tr and then td.

Firefox and Google Chrome behaves as I want but for some reason each CoreTableRow isn't getting pushed down to accommodate the height of the inner CoreTableCell divs in IE.

The below code is completely standalone, so please copy and paste into a blank html document to view:

html, body, * {
  margin: 0;
  padding: 0;
}

div.CoreTable {
  position: relative;
  clear: both;
  float: left;
  font-family: Arial, Verdana, Sans-Serif;
}

div.CoreTable div.CoreTableRow {
  /*
  display:inline-block;
  display:block;
  */
  clear: both;
  overflow:开发者_StackOverflow hidden;
  border: 2px dotted #0000AA;
}

div.CoreTable div.CoreTableRow div.CoreTableCell {
  float: left;
  padding: 2px;
}

<!-- PINK -->

<div class="CoreTable" style="background-color: #FFEEEE;">
  <div class="CoreTableRow">
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell" style="width: 300px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="CoreTableCell" style="width: 300px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
  <div class="CoreTableRow">
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell" style="width: 200px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell" style="width: 300px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="CoreTableCell" style="width: 300px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
  <div class="CoreTableRow">
    <div class="CoreTableCell" style="width: 300px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="CoreTableCell" style="width: 300px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="CoreTableCell" style="width: 300px; background-color: #FFAAAA;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
</div><br />

<!-- GREEN -->

<div class="CoreTable" style="background-color: #EEFFEE;">
  <div class="CoreTableRow">
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell" style="width: 300px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="CoreTableCell" style="width: 300px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
  <div class="CoreTableRow">
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell" style="width: 200px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell">Lorem</div>
    <div class="CoreTableCell" style="width: 300px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="CoreTableCell" style="width: 300px; background-color: #AAFFAA;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
  <div class="CoreTableRow">
    <div class="CoreTableCell" style="width: 300px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="CoreTableCell" style="width: 300px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="CoreTableCell" style="width: 300px;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
</div>

Thank you in advance for anyone who can figure out this puzzle XD

If you mean that your inner div is "overflowing" the containing/outer div,the solution would be adding "overflow:auto;" to the outer div (coreTable)

You can just add "display:inline-block"

.main{
  width:400px;
  background:red;
  }
.small{
  width:100px;
  background:blue;
  height:100px;
  display:inline-block;
  }

<div class="main">
  <div class="small"></div>  
  <div class="small"></div>  
  <div class="small"></div>
  <div class="small"></div>  
  <div class="small"></div>  
  <div class="small"></div>
</div>