SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gab between Anchored Footer and Main Content Div

    I have an anchored footer and then a main content div. Problem is there's a gap. I am using overflow:hidden because I want the wrapper div to fill the rest of the page downward with the off-white color that wraps around the main content's image.

    http://www.codezest.com/post/site7.png

    <body>

    <div id="OuterContainer">
    <!-- Header -->
    <div id="HeaderMain">
    HeaderMain
    <div id="HeaderContainer"></div>
    </div>

    <div id="TopNavMain"></div>

    <!-- TopNav Bucket -->

    <div id="MainContainer">
    <!-- Main Content -->
    <div id="MainContent">
    <div id="SubHeaderMain">
    SubHeaderMain<!-- user control -->

    </div>


    <div id="LefNavMain">LeftNavMain</div>
    <div id="ProductMainContent">ProductMainContent

    </div>
    <div id="ProductRightNav">ProductRightNav

    </div>
    <div id="ProductSubAreaMain">ProductSubAreaMain


    </div>
    <div id="tabs">
    <ul class="tabImages">
    <li><a href="#PTabContent"><span><img id="imgPTab" width="262" height="67" src="/Content/Images/Product/tabA_1.gif" /></span></a></li>
    <li><a href="#OContent"><span><img id="imgOTab" width="304" height="67" src="/Content/Images/Product/tabA_2.gif" /></span></a></li>
    <li><a href="#RContent"><span><img id="imgRTab" width="216" height="67" src="/Content/Images/Product/tabA_3.gif" /><img id="imgRTab_long" width="304" height="67" src="/Content/Images/Product/tabsB_2.gif" /></span></a><img id="imgTopRightTabFiller" width="216" height="67" src="/Content/Images/Product/tabsE_3.gif" /></li>
    </ul>
    <div id="TabsMain">
    <div id="PContent">

    </div>
    <div id="OContent">

    </div>
    <div id="RContent">

    </div>
    </div>
    </div>

    <div id="TabsMainBottom"></div>
    <div id="ButtonCrossSellMain"></div>


    </div>
    </div>
    </div>
    <!-- Footer -->

    <div id="wrap">
    <div id="main" class="clearfix">

    </div>
    </div>

    <div id="FooterLine">
    <div id="FooterEnd"></div>
    <div id="FooterMain"></div>
    </div>
    </body>

    /* CLEAR STYLES
    =====================================================================*/

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: Helvetica, Arial, sans-serif;
    }

    *
    {
    padding:0;
    margin:0;
    }



    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    /* CLEAR FIX*/
    .clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */

    /* Fixes gaps between images issue - Dave */
    img{display:block;}

    /*
    =====================================================================
    STYLES
    =====================================================================
    */

    html, body, #wrap {height: 100%;}

    body > #wrap {height: auto; min-height: 100%;}


    body
    {
    background-color: #FAF6F3;
    background-image: url(/content/images/site/backgroundfill.jpg);
    background-repeat: repeat-x;
    margin: 0 auto 0 auto;
    color: #666666;
    font-size: 11px;
    }

    input[type="text"]
    {
    height: 25px;
    vertical-align: middle;
    border: 1px solid #EAE8E1;
    background: transparent url(/content/images/site/textboxgradient.png);
    background-repeat: repeat-x;
    }

    input[type="radio"]
    {
    vertical-align: middle;
    }

    #OuterContainer
    {
    background: url(/content/images/experimental/wrapper.gif) no-repeat;
    width: 990px;
    height:1000px;
    margin: 0 auto 0 auto;
    border: 1px solid black;
    }

    #HeaderMain
    {
    background: url(/content/images/experimental/header.jpg) no-repeat;
    width: 972px;
    height: 128px;
    margin: 0 auto 0 auto;
    border: 1px solid black;
    }


    #SubHeaderMain
    {
    height: 35px;
    width: 972px;
    margin: 0 auto 0 auto;
    /*border: 1px solid green;*/
    }

    #TopNavMain
    {
    background: url(/content/images/experimental/redslice.gif);
    background-repeat: repeat-x;
    width: 972;
    height: 27px;
    }

    #MainContainer
    {
    overflow: hidden;
    min-height: 839px;
    background-color: #fff;
    width: 972px;
    margin: 0 auto 0 auto;
    overflow: hidden;
    /*border: 1px solid red;*/
    padding-bottom: 30px;
    }

    #MainContent
    {
    background: url(/content/images/experimental/main.jpg) no-repeat;
    width: 972px;
    height: 301px;
    margin: 0px auto 0px auto;
    /*border: 1px solid green;*/
    }

    #FooterLine
    {
    background: url(/content/images/site/footerLine.gif);
    background-repeat: repeat-x;
    }
    #FooterEnd
    {
    background: url(/content/images/site/footer.gif) no-repeat;
    width: 990px;
    height: 30px;
    position: relative;
    margin: -30px auto 0 auto;
    clear:both;
    }

    #FooterMain
    {
    height: 71px;
    background-color: #C6BFAF;
    }

    #main {padding-bottom: 30px;}

    #LefNavMain
    {
    float: left;
    width: 175px;
    margin-right: 8px;
    height: 1100px;
    border: 1px solid green;
    }

    #ProductMainContent
    {
    float:left;
    width:625px;
    margin-right: 8px;
    height:344px;
    border: 1px solid green;
    }

    #ProductRightNav
    {
    float: right;
    height: 434px;
    width: 145px;
    margin: 0px 0px 10px 0px;
    padding-bottom: 1px;
    margin-top: -1px;
    border: 1px solid green;
    }

    #ProductSubAreaMain
    {
    width: 625px;
    height: 88px;
    margin: 0px 10px 0px 0px;
    float: left;
    border: 1px solid green;
    }


    #tabs
    {
    display: inline-block;
    }

    #tabs li a
    {
    float: left;
    display: inline;
    vertical-align: bottom;
    }

    #tabs li
    {
    float: left;
    display: inline;
    vertical-align: bottom;
    }

    /* end horizontal alignment */

    #TabsMain
    {
    background: url(/content/images/product/sides.gif);
    background-repeat: repeat-y;
    width: 782px;
    float:left;
    }

    #TabsMainBottom
    {
    background: url(/content/images/product/bottom.gif) no-repeat;
    height: 24px;
    width: 782px;
    float: left;
    }

    #ButtonCrossSellMain
    {
    width: 775px;
    float: left;
    height: 178px;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    #LeftNavMain is causing it to have a gap.1100px height..
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LeftNavMain is ok at that height. It's not that gap I'm referring to. It's the tan gap between the end of the white and the start of the footer.

  4. #4
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can a mod wrap some tags around this please?[c o d e ] [ / c o d e ]
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/



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
  •