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
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS footer positioning problem

    I have a series of DIV's
    outer
    banner Full width
    menu Left side 1/3 width
    content Right 2/3 varable height
    footer suppost to be full with below menu and content

    I am having a problem getting the footer to line up at the bottom of the page full width of my outer div.

    Any help would be appreciated.

    Code:
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> Welcome </title>
    
    	<link href="css/mycss.css" rel="stylesheet" type="text/css" />
    	
    </head>
    
    <body>
    
    <div id="outerDiv">
    
    	<div id="header" >
    		<h1 style="margin-bottom:0;"></h1>
    	
    	</div>     <!--   End Header Div   -->
    
    	
    	<div id="mainMenu">
    		<ul>
    			<li> <a class="blue" href="home.html"><em>Home</em></a></li>
    			<li> <a class="blue" href="service.html"><em>Inspection Service</em></a></li>
    			<li> <a class="blue" href="pricing.html"><em>Pricing</em></a></li>
    			<li> <a class="blue" href="reports.html"><em>Report Content</em></a></li>
    			<li> <a class="blue" href="about.html"><em>About Us</em></a></li>
    			<li> <a class="blue" href="contact.html"><em>Contact Us</em></a></li>
    			<li> <a class="blue" href="faq.html"><em>FAQs and Links</em></a></li>
    
    		</ul>
    		<p align="center"><img src="images/logo1.jpg" alt="" height="130" Width="140"></p>
    		<br />
    		
    		<p align="center"><img src="images/logo4.gif" alt=" " height="140" width="140"></p>
    	</div>      <!--   End mainMenu Div   -->
    	
    	<div id="mainContent">
    		<h2 align="center">Content</h2>
    		<p align=center><img src="Images/building.jpg" alt=""  height="150" width="150" /></p><br/>
    		<p>More Content</p>
    		
    		<p>More Content</p>
    	
    	
    	</div>     <!--   End mainContent Div   -->
    	<div id="footerDiv"> 
    
    		<h6>This is the area for the footer to go</h6>
    </div>  <!-- End of Footer Div  -->
    </div>  <!--   End Outer Div   -->
    
    
    
    	
    </body>
    </html>
    
    
    
    body {
    	font-family: Georgia, serif;
    	background: #bbb url(../images/bg.jpg);
    	margin: 0;
    	Padding: 0;
    	
    }
    
    p, h1, h2, h3, h4, h5, h6, li {
    	margin: 1ex 1em;
    }
    
    div#base {
    
    	width: 800px;
    	margin:o auto;
    	
    
    }
    
    div#outerDiv {
    	width: 796px;
    	margin:0 auto;
    	
    }
    
    div#header {
    	height: 180px;
    	background: url(../images/BannerWhite3.png) no-repeat;
    	
    
    }
    
    div#mainMenu {
    
    
    	background: url(../images/sidebarWhite.png) ;
    	float: left;
    	width: 175px;
    
    	margin:  0;
    	padding: 0;
    }
    
    
    	
    }
    
    #mainMenu li {
    	width: 300px;
    	height: 26px;
    	float: left;
    	border: 0px solid #000;
    	margin-right: 2px;
    	list-style-type: none;
    	text-indent: 0em;
    }
    	
    #mainMenu a em {
    	font-style: normal;
    	font-size: 1em;
    	line-height: 1.5em;
    }
    
    #mainMenu a {
    	text-decoration: none;
    	color: #000;
    	position: relative;
    	left:-37px;
    
    	width: 140px;
    	height: 22px;
    	display: block;
    	text-align: center;
    }
    
    #mainMenu a.blue {background: #00c; color: #fff;}
    
    #mainMenu a:hover {
    	width: 170px;
    	height: 28px;
    	z-index: 200;
    	background: #aaa;
    }
    #mainMenu a:hover em {
    	font-size: 1.5em;
    	color: #000;
    	line-height: 1.1em;
    	overflow: hidden;
    	cursor: pointer;
    	background: #f93;
    	border: 1px solid #f93;
    	position: absolute;
    	width: 170px;
    	height: 25px;
    	left: -12px;
    	top: -8px;
    }
    
    #mainMenu a:hover.blue em {background: #0000cc:}
    
    div#mainContent {
    	background: url(../images/sidebarWhite.png) ;
    
    	width:601px;
    	float: left;
    	padding: 10px 10px;
    	h2: 
    }
    
    div#aboutContent {
    	background: url(../images/sidebarWhite.png);
    	
    	width:601px;
    	float: left;
    	padding: 10px 10px;
    	h2: 
    }
    #aboutContent  li{
    	font-size: .75em;
    }
    
    div#footerDiv {
    	position: absolute;
    	float: bottom;
    	width: 796px;
    
    	
    
    	margin: 15px;
    
    }
    #footerDiv h6 {
    	color: #3333cc;
    
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'd recommend you to check http://bonrouge.com/2c-hf-fixed.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 to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the link looks like what I have been looking for.


  •  

    Tags for this Thread

    Posting Permissions

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