CODEWITHSUNDEEP
htmlcsscss-float
Vito Mantese
Vito Mantese

Reputation: 127

nested float/nested row inside a column

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

Upvotes: 0

Views: 62

Answers (2)

Rison
Rison

Reputation: 111

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.

Upvotes: 1

priya786
priya786

Reputation: 1834

.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

Upvotes: 1

Related Questions