nested float/nested row inside a column - html

Question

I'm trying align two tables side by side in a floated left div. I think I've got how to horizontally align divs in general with floats but in my example below, once I create 3 columns, all floated left, I can't get the two tables in the 3rd column in the div.nestedHorizontalTables to display side by side. I tried display:inline-block but they still keep stacking vertically.
html
<div class="main-content">
<div class="column1">
<table>table1</table>
</div>
<div id="column2">
<!--I want a group of 4 vertical pie charts here-->
<div id="pie1"></div>
<div id="pie2"></div>
<div id="pie3"></div>
<div id="pie4"></div>
</div>
<div id="column3">
<div class="nestedHorizontalTables">
<table id="tab2">table2</table>
<table id="tab3">table3</table>
</div>
<table>Table4</table>
<div class="nestedHorizontalPieAndTable">
<table>table5</table>
<div id="pie6"></div>
</div>
</div>
</div>
css
#column1{
float:left;
width:40%;
}
#column2{
float:left;
width:20%;
}
#column3{
float:left;
width:40%;
}
.nestedHorizontalTables{
display:inline-block;
}
#tab2{
width:80%;
}
#tab3{
width:20%;
}
thanks

Answer 1

.main-content
{
margin:0;
padding:0;
float:left;
width:100%;
}
.column1 {
margin:0;
float: left;
width: 40%;
}
#column2 {
margin:0;
float: left;
width: 20%;
}
#column3 {
margin:0;
float: left;
width: 40%;
}
.nestedHorizontalTables {
display: inline-block;
}
#tab2 {
width: 80%;
}
#tab3 {
width: 20%;
}
<div class="main-content">
<div class="column1">
<table>table1</table>
</div>
<div id="column2">
<!--I want a group of 4 vertical pie charts here-->
<div id="pie1">hello</div>
<div id="pie2"></div>
<div id="pie3"></div>
<div id="pie4"></div>
</div>
<div id="column3">
<div class="nestedHorizontalTables">
<table id="tab2">table2</table>
<table id="tab3">table3</table>
</div>
<table>Table4</table>
<div class="nestedHorizontalPieAndTable">
<table>table5</table>
<div id="pie6"></div>
</div>
</div>
</div>
You may try this

Answer 2

If you just want the two tables inside nestedHorizontalTables to be displayed side by side, add float:left to both.
#tab2 {
width:80%;
float:left;
}
#tab3 {
width:20%;
float:left;
}
Here is a jsFiddle to help you.