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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help! Content overlapping footer

    For some odd reason my footer doesnt want to move and would rather have become overlapped by my content.

    heres a demo: http://aloke.winc.biz/middle.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .style2 {
    	color: #333333
    }
    body {
    	margin: 0px;
    	padding: 0px;
    }
    #header {
    	width: 100%;
    	background-image: url(images/headerbg.jpg);
    	background-repeat: repeat-x;
    	height: 119px;
    }
    #menu {
    	width: 560px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #menu ul {
    	list-style: none;
    	line-height: normal;
    	padding: 0;
    	margin: 0;
    }
    #menu li {
    	display: inline;
    }
    #menu a {
    	display: block;
    	text-decoration: none;
    	color: #FFFFFF;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	float: left;
    	padding-top: 50px;
    	width: 110px;
    	text-align: center;
    	margin-right: 15px;
    	margin-left: 15px;
    	height: 69px;
    	padding-bottom: 0px;
    }
    
    #menu a:hover {
    	background-image: url(images/linksbg.jpg);
    	background-repeat: repeat-x;
    }
    #mid {
    	background-image: url(images/midbg.jpg);
    	background-repeat: repeat-x;
    }
    #middle {
    	width: 830px;
    	padding: 0px;
    	margin-right: auto;
    	margin-left: auto;
    	margin-top: 0px;
    	margin-bottom: 0px;
    }
    #left {
    	height: 500px;
    	width: 25px;
    	background-image: url(images/midleft.jpg);
    	background-repeat: no-repeat;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    }
    #right {
    	background-image: url(images/midright.jpg);
    	background-repeat: no-repeat;
    	height: 500px;
    	width: 25px;
    	float: right;
    	margin: 0px;
    	padding: 0px;
    }
    #middletop {
    	background-repeat: repeat-x;
    	height: 43px;
    	margin: 0px;
    	clear: none;
    	padding: 0px;
    	background-image: url(images/midtop.jpg);
    }
    #middlebot {
    	background-color: #FFFFFF;
    	height: 500px;
    	padding-top: 20px;
    }
    #midheaderbg {
    	background-color: #f2f0f1;
    	height: 100px;
    	width: 735px;
    	margin-right: auto;
    	margin-left: auto;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 60px;
    	font-weight: bolder;
    	letter-spacing: -4px;
    	color: #cbcbcb;
    }
    #midheader {
    	padding-top: 42px;
    }
    #midcontent {
    	padding-top: 25px;
    	clear: none;
    }
    #footer {
    	background-image: url(images/footer.jpg);
    	background-repeat: repeat-x;
    	height: 38px;
    	padding-top: 16px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #FFFFFF;
    	clear: both;
    	float: none;
    	visibility: inherit;
    	z-index: auto;
    }
    #footer a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    -->
    </style>
    <script type="text/javascript" src="swfobject.js"></script>
    </head>
    
    <body>
    <div id="header">
        <div id="menu">
    	<ul>
    	  <li><a href="index.php">Home</a></li>
    	  <li><a href="portfolio.php">Portfolio</a></li>
    	  <li><a href="about.php">About Me</a></li>
    	  <li><a href="contact.php">Contact Me</a></li>
    	</ul>
        </div>
    </div>
    
    <div id="mid">
    <div id="middle">
    <div id="left"></div>
    <div id="right"></div>
    <div id="middletop"></div>
    <div id="middlebot">
      <div id="midheaderbg">
        <div id="midheader"><span class="style2">Portfolio</span> of Aloke Pillai</div>
      </div>
    <div id="midcontent">
      <div align="center">
      	<div id="flashcontent">
    			SimpleViewer requires Macromedia Flash. 
    			<a href="http://www.macromedia.com/go/getflashplayer/">
    			Get Macromedia Flash.</a> If you have Flash installed, 
    			<a href="index.html?detectflash=false">click to view gallery</a>
    			</div>
    	  	
    			<script type="text/javascript">  		
    			var fo = new SWFObject("viewer.swf", "viewer", 
    			"640", "480", "7", "#FFFFFF");		  	
    			fo.write("flashcontent");	  	
    			</script>
        </div>
    </div>
    </div>
    </div>
    </div>
    
    <div id="footer"><table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td>Copyright &copy; 2007 Aloke Pillai. All Rights Reserved.</td>
        <td><div align="right"><a href="index.php">Home </a>&Iota; <a href="portfolio.php">Portfolio </a>&Iota; <a href="about.php">About Me </a>&Iota; <a href="contact.php">Contact Me </a></div></td>
        </tr>
    	</table></div>
        
    </body>
    </html>
    PLEASE HELP!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello viperxx,
    Take the height off the div your content is going in so it can expand as needed. Is this the right div?
    Code:
    #middlebot {
    	background-color: #FFFFFF;
    	height: 500px; /*remvove this*/
    	padding-top: 20px;
    }
    Last edited by Excavator; 01-12-2008 at 07:17 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    viperxx (01-12-2008)

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    wow I can't believe I didn't catch that

    thanks alot! REP+


  •  

    Posting Permissions

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