Geek asks and answers

How to place a div on the right side of cascading tables - CSS

I have 3 tables cascading one after another. I have a div that I want to place on the right side of these tables. The height of the div may vary depending on the text inside. Currently, a div is displayed under tables, as shown below:

current

<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
  <tr>
    <td class="cell1">Cell1</td>
    <td class="cell2">Cell2</td>
  </tr>
    <tr>
    <td class="cell1">Cell3</td>
    <td class="cell2">Cell4</td>
  </tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
  <tr>
    <td class="cell1">Cell5</td>
    <td class="cell2">Cell6</td>
  </tr>
    <tr>
    <td class="cell1">Cell7</td>
    <td class="cell2">Cell8</td>
  </tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
  <tr>
    <td class="cell1">Cell9</td>
    <td class="cell2">Cell10</td>
  </tr>
    <tr>
    <td class="cell1">Cell11</td>
    <td class="cell2">Cell12</td>
  </tr>
</table>
<div class="mydiv">mydiv</div>

But I want to put the div next to the tables so that it can expand down.

Here is a working script http://jsfiddle.net/ZHVuf/1/

+5
source share
5 answers

You should add a container around your table as follows:

Html

<div id="container">
<!-- Your table -->
</div>

And make it float leftlike your div#myDiv

Css

#container {
    float:left;
}

see updated fiddle .

fiddle clearfix!

insertusernamehere commented, overflow: hidden clearfix, . .

+3

float:left; table clear:both; .

float:left; div position:relative;top:0; .

div , div.

<div class="tableContainerDiv" style="float:left;">
   <table><tr><td></td></tr></table>
   <table><tr><td></td></tr></table>
   <table><tr><td></td></tr></table>
</div>
<div class="yourDiv" style="float:left;"></div>
+1

HTML

<div class="cl">
    <div style="float: left">
        your tables
    </div>
    <div class="mydiv" style="float: left">mydiv</div>
</div>

CSS

.cl:after{ content: " ";  display: block; height: 0px; clear: both; visibility: hidden;}
.cl {display: inline-block;}
/* Hides from IE-mac \\*/
* html .cl {height: 1%;}
.cl {display: block;}
/* End hide from IE-mac */
+1
source

move tables inside another div, float to the left;

HTML

<div class="table-wrap">
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
  <tr>
    <td class="cell1">Cell1</td>
    <td class="cell2">Cell2</td>
  </tr>
    <tr>
    <td class="cell1">Cell3</td>
    <td class="cell2">Cell4</td>
  </tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
  <tr>
    <td class="cell1">Cell5</td>
    <td class="cell2">Cell6</td>
  </tr>
    <tr>
    <td class="cell1">Cell7</td>
    <td class="cell2">Cell8</td>
  </tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
  <tr>
    <td class="cell1">Cell9</td>
    <td class="cell2">Cell10</td>
  </tr>
    <tr>
    <td class="cell1">Cell11</td>
    <td class="cell2">Cell12</td>
  </tr>
</table>
</div>
<div class="mydiv">mydiv</div>

CSS

.class1{
    width: 100px;
    height: 100px;
    background: orange;
}
.class2{
    width: 100px;
    height: 100px;
    background: green;
}
.class3{
    width: 100px;
    height: 100px;
    background: gray;
}
.mydiv{
    width: 200px;
    background: blue;
    float: left
}
.table-wrap{float:left;}
0
source 
<table>
   <tr><td>
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
  <tr>
    <td class="cell1">Cell1</td>
    <td class="cell2">Cell2</td>
  </tr>
    <tr>
    <td class="cell1">Cell3</td>
    <td class="cell2">Cell4</td>
  </tr>
</table>enter code here
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
  <tr>
    <td class="cell1">Cell5</td>
    <td class="cell2">Cell6</td>
  </tr>
    <tr>
    <td class="cell1">Cell7</td>
    <td class="cell2">Cell8</td>
  </tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
  <tr>
    <td class="cell1">Cell9</td>
    <td class="cell2">Cell10</td>
  </tr>
    <tr>
    <td class="cell1">Cell11</td>
    <td class="cell2">Cell12</td>
  </tr>
</table>
       </td>
       <td>
<div class="mydiv">mydiv</div>
       </td>
    </tr>
</table>
-1
source

More articles:


All Articles