How to fixed <div> in the specific location in css - css

Question

I have three tables, First Table margin-top is 50px and second table have variation rows depends on the text but the Third table I want to fix margin-top is :150px standard.
but third table not able to fix it on margin-top:150px because the second table have variation of the rows.
How to fixed the third table on margin-top:150px even-though the second table have variation rows?
for example :
Table 1
Name : Balakrishnan
Table 2 <br>
S.No particulars Amount <br>
1 Desk 200 <br>
Table 3
Total : 200
I want to fix constant position of the table 3 even though table2 rows increased
! when rows increased table 2 the third table should not move to down
I have tried the following code
.table1
{
margin-top:10px;
}
.table2
{
margin-top:15px;
}
.table3
{
margin-top:30px;
}
the above code defined in
the table class
please click the above link to view my picture

Answer 1

If I understand what you are asking the best solution is the following:
Wrap all the tables in a div
Give the middle div a fixed height and overflow: auto
HTML:
<div>
<table>
<tr>
<th>Name</th>
<td>Balakrishnan</td>
<td>Age</td>
<td>25</td>
</tr>
</table>
</div>
<div class="fixed">
<table>
<tr>
<th>S.No</th>
<th>Particulars</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td>Item1</td>
<td>1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>Item2</td>
<td>1</td>
<td>50</td>
</tr>
<tr>
<td>3</td>
<td>Item3</td>
<td>1</td>
<td>50</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<th>Total:</th>
<td>250</td>
</tr>
</table>
</div>
CSS:
.fixed {
height: 150px;
overflow-y:auto;
margin: 20px 0 ;
}
Example:
http://jsfiddle.net/podjpv8j/
More Rows Example:
http://jsfiddle.net/podjpv8j/1/

Answer 2

I'm not sure what you want to do with the box in the middle. Meaning do you want it to adjust with the page, or scroll when it gets too much information in it. What it sounds like is you want a footer style box that stays in the same position though out the page. Check out this how-to site and follow the instructions to the footer.
This should help you understand how the 3rd box will stay in a "fixed position".
http://learnlayout.com/position-example.html