I'm quering a MySQL database and use a script to put results into an automatically generated HTML-file.
I have two tables with 2 columns and 4 rows each that need to be put side-by-side.
I have put my html & css in fiddle.
http://jsfiddle.net/mika6891/7b0k049r/1/
My HTML code:
<!-- gene description -->
<div id="container">
<div id="gene_A_description" >GENE - A</div>
<div id="gene_B_description" >GENE - B</div>
</div>
<div id="container">
<table id="gene_A_text" class="listitems2">
<tr>
<td><b>test1</b></td>
<td><!--test1-->test1</td>
</tr>
<tr>
<td><b>test2</b></td>
<td><!--test2-->test2</td>
</tr>
<tr>
<td><b>test3</b></td>
<td><!--test3-->test3</td>
</tr>
<tr>
<td><b>test4</b></td>
<td><!--test4-->test test test test test test test test test test test test test test test test</td>
</tr>
</table>
<div id="container">
<table id="gene_A_text" class="listitems2">
<tr>
<td><b>test1</b></td>
<td><!--test1-->1</td>
</tr>
<tr>
<td><b>test2</b></td>
<td><!--test2-->+</td>
</tr>
<tr>
<td><b>test3</b></td>
<td><!--test3-->test3</td>
</tr>
<tr>
<td><b>test4</b></td>
<td><!--test4-->test test </td>
</tr>
</table>
<div id="container">
<div id="gene_A_description" >GENE - C</div>
<div id="gene_B_description" >GENE - D</div>
</div>
My CSS-code
table{
font-family:Arial;
border-collapse: separate;
border-spacing: 10px;
}
#container{
width: 500px;
margin-left: auto;
margin-right: auto;
}
#gene_A_description{
width:200px;
height:50px;
background-color:#e13737;
color:white;
text-align:center;
margin-top: 30px;
float: left;
font-family: 'Arial Black', Gadget, sans-serif;
line-height: 50px;
}
#gene_B_description{
width:200px;
height:50px;
background-color:#e13737;
color:white;
text-align:center;
margin-top:30px;
float: right;
font-family: 'Arial Black', Gadget, sans-serif;
line-height: 50px;
}
table.listitems2 {
width: 150px;
margin-left: auto;
margin-right: auto;
}
#gene_A_text{
float:left;
}
#gene_B_text{
float:right;
}
Now these html will be automatically generated so the table for GENE_A_TEXT and GENE_B_TEXT will never contain the same information and so will also not be of the same heigth, as can be seen in the example (because of test4 row).
I would want that the same rows in table GENE_A_TEXT and GENE_B_TEXT have the same height, depending on the amount of information that is in there. So that my next GENE_C_DESCRIPTION and GENE_D_DESCRIPTION start at the same height, and not like it is now, that they are placed below GENE_B_TEXT
This is a picture of how it should look like
