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>
<head>
<title></title>
<style type="text/css">
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: hidden;
border: 2px dotted #0000AA;
}
div.CoreTable div.CoreTableRow div.CoreTableCell
{
float: left;
padding: 2px;
}
</style>
</head>
<body>
<!-- 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>
</body>
</html>
Thank you in advance for anyone who can figure out this puzzle XD