www.webdeveloper.com
Results 1 to 3 of 3

Thread: Footer overlaps to maincontent

  1. #1
    Join Date
    Sep 2010
    Posts
    4

    Footer overlaps to maincontent

    Hi there,
    greed83 previously posted the issue but the thread still didn't solve my paroblem!
    http://www.webdeveloper.com/forum/sh...d.php?t=173740

    Basically When I resize the browser, the footer looks like itís floating and overlaps the content by about 50px from the bottom (my footer height is 50px).But when I make the browser much smaller, the footer actually disappears

    Would really appreciate it if you could give me some advice on this?

    My main content includes
    1. menu bar (on the left)
    2. 2 column content (on the right)
    I used div float.

    Iíve checked all the margins, but this still doesnít solve the problem!

    Here's my HTML
    <div id="page-wrap"><!-- Includes header -->
    <div id="main-content">
    <div id="left-nav">
    <ul id="nav">....</ul>
    </div><!-- END left-nav -->

    <div id="right-col">
    <div id="right-top">image goes here</div>
    <div id="right-left">
    <p>text goes here</p>
    </div><!-- END right-left -->

    <div id="right-right">
    <p>text goes here</p>
    </div><!-- END right-right -->
    </div><!-- END text -->
    </div><!-- END right-col -->
    </div><!-- END main-content -->
    </div><!-- END page-wrap -->

    <div id="footer">
    footergoes here
    </div>
    </body>

    Here's my CSS
    div#page-wrap {
    width:800px;
    margin-left:auto;
    margin-right:auto;
    }
    div#main-content {
    margin-left:auto;
    margin-right:auto;
    padding-bottom: 50px; /*Same height as footer*/
    }

    div#main-content div#left-nav {
    float: left;
    width: 230px;
    padding-top: 3px;
    }

    div#main-content div#left-nav ul#nav {
    list-style: none;
    display: block;
    width: 113px;
    height: 22px;
    float: left;
    color:#4b4736;
    text-decoration: none;
    font-weight: bold;

    }

    div#main-content div#right-col {
    float: right;
    width: 557px;
    margin-left: 9px;
    }

    div#main-content div#right-col {
    float: right;
    width: 547px;
    margin: 0px 5px 0px 10px;
    }

    div#footer {
    padding: 0 0 0 0;
    position: relative;
    margin-top: -50px;
    bottom:0px;
    height:50px;
    clear: both;
    }
    div#footer div#image {
    width: 885px;
    margin-left:auto;
    margin-right:auto;
    }

  2. #2
    Join Date
    May 2010
    Posts
    93
    is the footer div inside your page-wrap div? if it is then you shouldnt have to set auto margin for left and right it should fit inside....if you don't then it could be conflicting with the height set you have for div#main-content div#left-nav...try putting the footer div with the br=clear css code (which you already have set) in the page-wrap div....if not try removing the height for the left-nav and see if that works...kinda hard to really know if i cant see

  3. #3
    Join Date
    Sep 2010
    Posts
    4
    Hi repeater09,
    YES it worked!
    removing the height for the left-nav didn't work.
    When I put '<br style="clear:both;" />' in div#footer in html, it created vertical scroll bar, but when I put it in div#main-content html, it worked apart from IE6

    Need to look into this but thank you so much!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles