Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Footer wont go down when content expands the content div

    Hi,

    My footer at the bottom of my site wont go down when my content gets to big for the div, the div expands but it goes under the footer.

    Heres my code:

    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
        <html>
        <head>
        	<link rel="stylesheet" href="limestyle.css" type="text/css" />
        	<title></title>
        </head>
        <body>
    		<div id="container">
       			<div id="header"></div>
       			<div id="main">
       				<div id="left"></div>
       				<div id="right"></div>
    			</div>
       			<div id="footer"></div>
    		</div> 
        </body>
        </html>
    Code:
    *{
    	margin:0;
    	padding:0;
    }
    
    body 
    {
       margin:0;
       padding:0;
       height:100%;
       background-color:#dad8d8;
    
    }
    
    #container {
       min-height:100%;
       position:relative;
       width:60%;
       height:100%;
       margin:auto;
    }
    
    #header {
       background:black;
       padding:10px;
    }
    
    #main {
       padding:10px;
       background-color:yellow;
       padding-bottom:60px;   /* Height of the footer */
       min-height:300px;
    }
    
    #left
    {
    width:30%;
    height:100%;
    min-height:200px;
    background-color:red;
    float:left;
    }
    
    #right
    {
    width:70%;
    min-height:200px;
    background-color:green;
    float:left;
    
    }
    
    #footer {
       position:absolute;
       bottom:0;
       width:100%;
       height:60px;   /* Height of the footer */
       background:blue;
    }
    Thanks
    HalfALime

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Have a look at this standard layout ,http://bonrouge.com/2c-hf-fluid.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Will i be able to adapt this not having it at 100&#37;??

    Im sorry im just a bit new at css.

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    The height:100%; in your body css tells the page to be no more than 100% tall. And that 100% is what you can see in your browser without to scroll vertically. If you want your site to just expand, just don't put any height and it will expand to the height that fits.

    The property you are looking for might be min-height. Just note that it is not supported by all browsers.

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem is that the when more content goes in the right div it expands underneath the footer.

    Why does it do that?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by halfalime View Post
    Will i be able to adapt this not having it at 100%??

    Im sorry im just a bit new at css.
    Yes (assume you are asking about the width)
    Just add width:60% to the #wrap as you did for your #container
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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