+ Reply to Thread
Results 1 to 3 of 3

Thread: div float issue

  1. #1
    Junior Member
    Join Date
    Jan 2012
    Posts
    34

    div float issue

    I'm trying to achieve this layout
    Code:
     _______________________
    |                       |
    |        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.

    i used that html code :
    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 box"> bottom bar</div>
    </div>
    and this for css
    Code:
    .container{ height: 1000px}
    .tables{float: left}
    .box{border: 1px solid #ddd; height:150px; width: 100px;}
    .bottombar{float: left; position: fixed; bottom: 10px;}
    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.

  2. #2
    here is the FIX :

    HTML CODE :
    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 CODE :
    Code:
    .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.

    To get it to stick at the bottom of the page, just add the following to .bottombar:
    Code:
    position: fixed;
    bottom: 0;

  3. #3
    Junior Member
    Join Date
    Jan 2012
    Posts
    34
    this is amazing , it 100% corrected my issue , thank you .

+ Reply to Thread

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts