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 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Footer in a wrong location

    This is a very basic layout that worked fine until I started using position relative and absolute.
    Now footer info is displaying on the very top of my page and I don't know how to get it to the bottom where it belongs.

    Here is the code,
    Thanks

    Code:
    <body>
    <div id="wrapper">
    
    <div id="header">
    <h1>TEXT </h1>
    </div> <!-- header -->
    
    <div id="image">
    <img src="lake-3.jpg" width="535" height="250" alt= "winter"/>
    </div> <!-- image -->
    
     <div id="container">
     
      <div id="sidebar">
                        <ul class="nav">
    						<li id="current"><a href="index.html"> Home</a></li>
                            <li><a href="profile.html"> Profile</a></li>
                        </ul>
      </div> <!-- sidebar -->
      
      <div id="main">
      <h2><br />TEXT</h2>
      <p>
    	MORE TEXT<br /><br />
      </p>
       </div> <!-- main-->
       </div> <!-- container -->
    
    <div id="footer">
        <p>&copy; COPYRIGHT &nbsp;&nbsp;
        </p>
    </div><!-- footer -->
    
    </div> <!-- wrapper -->
    
    </body>

    Code:
    body {
        font-family: Arial;
        background-color: #9f987b;
        margin: 0;
        padding: 0;
    }
    p {
    margin: 1ex 1em;
    }
    h3 {
    margin:0;
    padding:0;
    }
    
    #wrapper {
    	position: relative;
    	width: 800px;
    	margin-right: auto;
    	margin-left: auto;
    	}
    
    #header {
    	background-color: #2c235f;	
    	width: 265px;
    	height: 250px;
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    
    h1 {
    color: #fff;
    text-align: center;
    padding: 50px 0 0 0; 
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    }
    #image {
    	width: 535px;
    	height: 250px;
    	position: absolute;
    	top: 0;
    	left: 265px;
    	
    }
    
    #container {
       overflow: hidden;
       zoom: 1; 
       background-color: #726c93;
       position: absolute;
       top: 250px;
       left: 0;
    }
    
    #sidebar {
    float: left;
    width: 225px;
    }
    
    ul.nav { 
    margin: 0; 
    padding: 40px 0 ;
    }
    
    ul.nav li { 
    padding: 0 10px 4px 10px; 
    margin: 0; 
    list-style: none 
    }
    
    ul.nav a {
      display: block;
      width: 205px;
      height: 25px;
      line-height: 25px;
      background-color:#eadfb5;
      text-decoration: none;
      color: #000;
      padding-left: 5px }
    
    #current a{
    background-color: #8a7830;
    }
    
    ul.nav a:hover {         
    background-color: #d4c794;
    }
    
    #main {
    float: right;
    width: 575px;
    }
    
    #main p {
        color: black;
    	line-height: 125%;
        margin: 1ex 0;
    	padding: 0 30px;
    	text-align: justify;
    }
    
    
    /* ===== footer ===== */
    
    #footer {
        clear: both;
        background: transparent;
        margin: 0 auto;
        padding: 5px;
    }
    
    #footer p {
        font-family: Geneva, sans-serif;
        font-size: .75em;
        color: black;
        margin: 0;
        padding: 0;
        text-align: center;
    }

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry allroundnews but nothing has changed...


  •  

    Posting Permissions

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