Results 1 to 2 of 2

Thread: Help: content area not pushing footer? Firefox.

  1. #1
    Join Date
    May 2008
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post

    Question Help: content area not pushing footer? Firefox.

    Hi, I've got a sort of weird centered layout, where I have 1 big container, and 3 columns floated-left, so I have unique backgrounds on each side of the center column. I'm also using a clear:both on the footer, and floating it as well, otherwise my content borders cut into my footer... I used Dave Shea's min-height hack on my content area, but in Firefox, when I add content, it doesn't push the footer down, and the content looks overflowed (no background color).

    NOTE: It looks fine in I.E. 7, + Opera 9.2

    You can see the live demo here:
    Demo Site
    And the CSS:
    CSS

    HTML:
    <body>

    <div id="container">

    <div id="leftCol" class="float-left"></div>


    <div id="centerCol" class="float-left">

    <div id="nav"></div>
    <div id="content-top"></div>
    <div id="content">

    <div id="main">
    <h3>Header</h3>
    <p>Sed orci. Pellentesque</p>
    <div class="imageholder"><img src="images/test1.gif" height="183"></div>
    <div class="imageholder"><img src="images/test2.gif"></div>
    <br class="clearboth">
    </div>
    </div>

    </div>


    <div id="rightCol" class="float-left"></div>


    <div id="footer" class="clearboth float-left"></div>


    </div>


    </body>
    CSS:
    div, ul, li, h3, img {
    padding: 0;
    margin: 0;
    border: 0;
    }

    body{
    margin: 0 auto;
    padding: 0;
    text-align: center;
    background: #104b89;
    }

    .float-left{
    float: left;
    }
    .clearboth{
    clear: both;
    }
    .hide{
    display: none;
    }


    #container{
    margin: 0 auto;
    width: 1081px;
    }

    #leftCol{
    width: 94px;
    height: 488px;
    background: url(images/left-col.gif) top left no-repeat;
    }

    #centerCol{
    width: 911px;
    height: 488px;
    background: #f3f3f3 url(images/header.gif) top left no-repeat;
    text-align: left;
    }

    #rightCol{
    width: 76px;
    height: 488px;
    background: url(images/right-col.gif) top left no-repeat;
    }

    #nav{
    height: 30px;
    background: #5380bc;
    width: 907px;
    *width: 911px;
    border-right: 2px solid #78a3d6;
    border-left: 2px solid #78a3d6;
    margin-top: 134px;
    }
    #content-top{
    height:46px;
    width: 911px;
    background: url(images/content-top.gif) top left no-repeat;
    }

    #content{
    width: 771px;
    *width: 911px;
    border-right: 2px solid #78a3d6;
    border-left: 2px solid #78a3d6;
    padding: 0 68px 1px 68px; /*margin for main content + Opera collapse fix*/
    }

    /* for Mozilla/Safari/Opera */
    *>#content {
    padding-top: 278px;
    min-height: 20px;
    }
    *>#main {
    margin-top: -278px;
    }
    /* for IE, with IE5/Mac backslash filter \*/
    * html #content {
    height: 278px;
    }
    /* end filter */

    #main h3{
    font-family: Arial, Helvetica, Verdana, sans-serif;
    padding-bottom: 16px;
    border-bottom: 1px solid #6699cc;
    margin-bottom: 16px;
    color: #104b89;
    font-weight: normal;
    font-size: 1.6em;
    letter-spacing: 0.1em;
    }

    #main p{
    color: #333;
    line-height: 20px;
    font-size: 12px;
    letter-spacing: 0.05em;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    }

    .imageholder {
    width: 243px;
    float: left;
    margin-top:20px;
    }

    #footer{
    height:292px;
    width: 1081px;
    background: url(images/footer.gif) bottom left no-repeat;
    }
    Sorry for such a massive post, I wasn't entirely sure what format you guys like to look at things in

    Thanks in advance, and have an awesome day.
    -Matt

  2. #2
    Join Date
    May 2008
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Well, I feel like an idiot. I had a height set on the center column, causing the content to overflow, but not expand the height of the column.

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
  •