Question

I’m using a table for the footer of my web page. I really don’t know much about tables because I’ve always used CSS. The following is the only table I’ve ever made. It seems to work in Opera, Chrome, and Firefox, but everything goes to the left in IE. I’m not sure what I’m doing wrong with the table because I don’t know much about tables. Here is the HTML:

<div id="framecontentBottom">
<div id="container">
        <div id="row">
<div id="left">

<!-- Counter Code START --><a href="http://www.e-zeeinternet.com/" target="_blank"><img src="http://www.e-zeeinternet.com/count.php?page=760915&style=LED_g&nbdigits=4&reloads=1" alt="Web Counter" border="0" ></a><br><a href="http://www.e-zeeinternet.com/" title="Web Counter" target="_blank" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; text-decoration: none;">Page Views</a><!-- Counter Code END -->

</div>


    <div id="middle">

Contact me at jacksterdavis<img src="images/@white.png">gmail.com

        </div>
            <div id="right">

            <!-- AddThis Button BEGIN -->
            <div class="addthis_toolbox addthis_default_style ">
            <a class="addthis_button_preferred_1"></a>
            <a class="addthis_button_preferred_2"></a>
            <a class="addthis_button_preferred_3"></a>
            <a class="addthis_button_preferred_4"></a>
            <a class="addthis_button_compact"></a>
            <a class="addthis_counter addthis_bubble_style"></a>
            </div>
            <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f302421558e3fc2"></script>
            <!-- AddThis Button END -->

            </div>
        </div>
<div id="row">
<div id="left">
</div>
    <div id="middle">
    <p>The internet is the printing press of the 21'st century.</p>
    </div>
<div id="right">
</div>
</div>

And here is the CSS:

#container {
    display: table;
    width: 100%;
    }

  #row  {
    display: table-row;   
    }

#middle {
    width:50%;
    text-align:center;
    display: table-cell;
    }

}
#left
{
   width:25%;
   text-align:left; 
   display: table-cell;
}
#right
{
   width:25%;
   text-align:right; 
   display: table-cell;
   padding: 5px;
}
#quote
{
    text-align:center;
    width:100%;
}
#logoBtm
{
    align:middle;
    text-align:center;
}
#logoBtmLeft
{
    align:left;
}
#logoBtmRight
{
    align:right;
}
#framecontentBottom{
    clear: both;
    position: relative;
    z-index: 10;
    margin-top: -3em;
    top: auto;
    bottom: 0; 
    height: 80px; /*Height of bottom frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: #585858;
    color: white;
    width: 100%;
}

If you point out everything wrong with my table it’s appreciated, thanks. A CSS fix would be the best but if the HTML must be edited it’s fine.

Answer 1

the problem most likely lies in the fact that you have two divs with the same id. use classes for row instead.removed for the comfort of others. This line doesnt help the solution at hand.

also, in referring to your comment, ie 7 does not support table display CSS.

http://caniuse.com/#search=table-cell

use a combination of inline block or float. but beware, as inline block has its own issues with ie7

http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html

Here is a working, valid, example.

http://jsfiddle.net/mRHnW/2/

A couple changes: Ive styled every div inside of .row so that it gets applied once (and if it needs to be fixed, it can be, in one place. Even in CSS, it needs to be DRY.

I removed the margin-top from the #frameContentBottom selector because it was screwing with jsfiddle giving me visible results. Feel free to re-instate it if its important to your layout.

I adjusted the width of your ‘columns’ to be slightly less than 100%, because you’ve also included padding. The way the CSS Box Model as specified by W3C works is that the width declaration does not include padding, border, and margin. Thus, if you’re creating a 100% div, and want 5px padding, then you need to specify less than 100% to get the padding within the 100% confines.

On a sufficiently wide screen (something bigger than jsfiddle default panes), your footer should look about what you expect.