SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question Relative Position and Whitespace at bottom below footer

    I am facing a peculiar issue with regards relative positioning of a center div and whitespace below the footer.

    Here is the basic framework

    Code:
    <html>
    <head>
    <style type="text/css">
    html, body {
    	height: 100%;
    	margin: 0 !important;
    	padding: 0 !important;
    }
    body {
    	min-height: 100%;
    	background: none;
    }
    #header {
    	position: absolute;
    	top: 0;
    	width: 100%;
    	background:#F00;
    }
    #maincontainer {
    	position: relative;
    	float: none;
    	top: 200px;
    	width: 100%;
    	height: auto !important;
    	z-index: 1000 !important;
    	display: block;
    	clear: both;
    	margin: 0 auto;
    	background:#900;
    }
    
    #footercontainer {
    	width: 100%;
    	clear: both !important;
    	position: absolute;
    	bottom:0; left:0;
    	display: block;
    	float: none;
    	background:#F00;
    }
    </style>
    </head>
    <body>
    <div id="header">
      <p>test header content</p>
      <p>some more content</p>
    </div>
    <div id="maincontainer">
      <div id="containermaininner">
        <div id="innerleft">
          <p>some test content </p>
          <p>some test content </p>
          <p>some test content </p>
          <p>some test content</p>
          <p>some more content</p>
        </div>
        <div id="innerright"></div>
        <div class="clear"></div>
      </div>
      <div id="footercontainer">
        <p>test footer content</p>
        <p>more footer content</p>
        <p>more footer content</p>
      </div>
    </div>
    </body>
    </html>
    I already have the code for body and html set at height:100%, margin and padding 0.

    Now the #maincontainer has position: relative and top= 200px;

    Hence, the issue occurs that after the footer there is around 200-220 px of white space and due to this the footer looks somewhere in between.

    I even tried position fixed and absolute for maincontainer but doesnot seem to work.

    I also tried sticky footer options but even that leaves same amount of white-space and hence I feel that the maincontainer positioning is the cause due to which the 100% height is getting

    Is there anyway to make the footer stick to the bottom of the page (not the browser window) so that no further scrolling is there after the footer. Right now after the footer there is around 200-220 px of white space and a user can scroll the browser window down even after the footer.

    Thanks for all the help
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I'm not sure what you are trying to do.

    Please give this a look and tell me what it does not do.

    Code:
    <html>
    <head>
    <style type="text/css">
    html, body {
    	padding:0;
    	margin:0;
    }
    #header {
    	background:#f00;
    }
    #maincontainer {
    	background:#900;
    	margin:0 auto;
    }
    #footercontainer {
    	background:#F00;
    }
    
    /* modern clearfix */
    .cf:before,
    .cf:after {
        content:"";
        display:table;
        line-height:0;
    }
    .cf:after {
        clear:both;
    }
    
    </style>
    </head>
    <body>
    <div id="header" class="cf">
        <p>test header content</p>
        <p>some more content</p>
    </div>
    <div id="maincontainer" class="cf">
        <div id="containermaininner">
            <div id="innerleft">
                <p>some test content</p>
                <p>some test content</p>
                <p>some test content</p>
                <p>some test content</p>
                <p>some more content</p>
            </div>
            <div id="innerright"></div>
            <div class="clear"></div>
        </div>
        <div id="footercontainer" class="cf">
            <p>test footer content</p>
            <p>more footer content</p>
            <p>more footer content</p>
        </div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up modern clearfix solves the issue

    @ronpat. Thanks a lot for the code. It works perfect and solves my white space issue.

    This code seems to do the trick

    Code:
    /* modern clearfix */
    .cf:before,
    .cf:after {
        content:"";
        display:table;
        line-height:0;
    }
    .cf:after {
        clear:both;
    }
    After adding this, there is no extra white space found after the body / footer.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by jaagare View Post
    @ronpat. Thanks a lot for the code. It works perfect and solves my white space issue.

    This code seems to do the trick

    Code:
    /* modern clearfix */
    .cf:before,
    .cf:after {
        content:"";
        display:table;
        line-height:0;
    }
    .cf:after {
        clear:both;
    }
    After adding this, there is no extra white space found after the body / footer.
    Thanks very much for the feedback, jaagare.

    The white space was being caused by the excaping text margns. There are several ways of preventing that from happening. One is to add a border or some padding (1px is enough) to the top and bottom of the container to keep the text margin from escaping. Another way is to add {overflow:hidden} to the container. The modern clearfix method has the fewest side effects.

  5. #5
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks @ronpat for the detailed explanation regarding the white space issue. Appreciated.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...


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
  •