Question

I’m trying to achieve this layout

 _______________________
|                       |
|        Table 1        |
|_______________________|
 _______________________
|                       |
|        Table 2        | 
|_______________________|  ___________________
                          |                   |
                          |    bottom bar     |
                          |___________________|  

The bottom bar has to always stay at the bottom of the page just to the right of the tables.

This is what I have so far.

I have this html

<div class="container">
    <div class="tables">
        <div id="table1" class="box">
            <table><tr><td>table 1</td></tr></table>
        </div>
        <div id="table2" class="box">
            <table><tr><td>table 2</td></tr></table>
        </div>
    </div>
    <div class="bottombar box"> bottom bar</div>
</div>

and this for css

.container{ height: 1000px}
.tables{float: left}
.box{border: 1px solid #ddd; height:150px; width: 100px;}
.bottombar{float: left; position: fixed; bottom: 10px;}

Here’s the jsfiddle link

The problem is that the bottom bar overlaps with the tables but it has to stay to the right of the tables. If I remove position fixed, the bottom bar stays to the right of the tables but is no longer attached to the bottom. Can any one guide me to fix this issue? Thanks.

Answer 1

Keep in mind that the value of a margin using a percent value is relative to the containing element. To achieve your desired effect, you just need to make some minor changes to your code:

<div class="container">
    <div class="tables">
        <div id="table1" class="box">
            <table><tr><td>table 1</td></tr></table>
        </div>
        <div id="table2" class="box">
            <table><tr><td>table 2</td></tr></table>
        </div>
    </div>
    <div class="bottombar"><div class="box">bottom bar</div></div>
</div>

CSS:

.tables { float: left; }
.box {
    width: 100px;
    height: 150px; 
    border: 1px solid #ddd; }
.bottombar{
    float: left;
    clear: both; }
.bottombar .box { margin: 0 0 0 100%; }

You might want to add .container { overflow: hidden; } to clear your floats.

Preview: http://jsfiddle.net/Wexcode/9bZDx/

Edit:

To get it to stick at the bottom of the page, just add the following to .bottombar:

position: fixed;
bottom: 0;

See: http://jsfiddle.net/Wexcode/9bZDx/3/