asked on

My footer div isn't visible.

I have searched Google and tried everything I could find to fix my problem.. but alas no luck.

So please someone help me out here.

My footer div is currently not visible. It is in the code after the container div and is there when I view the pages source, but it isn't being rendered visible. I'm posting my css and the relevent code below.

/* page code */
<body class="two_column">
<div id="container">
  <div id="header">
    <cfinclude template="banner.cfm" >
    <div id="main_menu">
      <cfinclude template="menu.cfm" >
    </div>
    <!-- end #header -->
  </div>
  <div id="sidebar1">
    <div class="popular">
      <cfinclude template="popular_links.cfm" >
    </div>
    <div class="search">
      <form action="" method="get" name="search_form">
        Site Search<br>
        <input name="search" type="text" value="" size="20">
      </form>
    </div>
    <!-- end #sidebar1 -->
  </div>
  <div id="mainContent">
    <cfinclude template="content.cfm" >
    <!-- end #mainContent -->
  </div>
 
</div>
</div>
<div id="footer">
  <cfinclude template="bottom.cfm" >
  <!-- end #footer -->
</div>
 
 
============================================================================
 
/* my css */
 
@charset "utf-8";
body  {
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background: white   url(../images/gifs/left_column_bg.gif) repeat-y;
}
.two_column #container { 
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;  
	border-bottom: 1px solid #000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	
} 
.two_column #header { 
	width: 100%;
	height: 217px;
	position: absolute;
	top: 0px;
	left: 0px;
	background: #742834 url(../images/gifs/banner_bg.gif) repeat-x;
	border-bottom: solid #bda05c 1px;
	padding: 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
 
.two_column #sidebar1 {
	float: left; 
	width: 12em; /* since this element is floated, a width must be given */
	padding: 15px 0; /* top and bottom padding create visual space within this div  */
	min-height:100%;
	position:absolute;
	top: 217px;
	left: 0;
}
.two_column #mainContent { 
	margin: 0 10px 0 11em; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
	padding-top:10px;
	width:700px;
	position:absolute;
	top:217px;
	left:12em;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;	
	
	
} 
.two_column #footer { 
	background-color: #742834;
	border-top:solid 1px #bda05c;
	height: 30px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	text-transform:uppercase;
	color: #bda05c;
	text-align:center;
	padding-top: 10px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	width:100%;
	
		
} 
 
 
 
 
/* popular links div styles */
.popular { 
	width: 250px;
	height: 100%;
	line-height: 30px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	position: absolute;
	top: 20px;
	left: -20px;
}	
 
 
.popular li {
	background-image:url(../images/gifs/list_arrow.gif);
	background-repeat:no-repeat;
	background-position:0 .6em;
	padding-left: 24px;
}
	
 
.search {
	width:inherit;
	padding-left:30px;
	padding-right: 10px;
	padding-bottom: 20px;
	color: white;
	font-weight:bolder;
	text-transform:uppercase;
	font-size:.9em;
	position: absolute;
	top: 370px;
 
}
 
.search input {
	border:solid 1px #000000;
	margin-top: 5px;
	margin-bottom: 20px;
}
 
/* main menu style */
#main_menu {
 
 
}
 
#main_menu ul{
position: absolute;
top:195px;
left: 240px;
margin: 0;
padding: 0;
margin-bottom: 1em;
font: small-caps 10pt Verdana;
width: 100%;
}
 
* html #main_menu ul{ /*IE only rule, reduce menu width*/
width: 99%;
}
 
#main_menu ul li{
display: inline;
}
 
#main_menu ul li a{
float: left;
color: white;
padding: 2px 12px;
text-decoration: none;
background: transparent url(../images/vertical.gif) center right no-repeat;
}
 
#main_menu ul li a:visited{
color: white;
}
 
#main_menu ul li a:hover{
	color: #bda05c;
	text-decoration:none;	
}
#main_menu ul li a:active{
	color: white;
	text-decoration:underline;	
}
 
/*end of main menu style */

Open in new window

nanharbison

Are you looking at it in Firefox, IE or some other browser?

rrattie

ASKER

I'm using IE6, FF3 and Chrome/Safari (webkit)

nanharbison

One thing that is wrong - you are trying to float your divs and assign them an absolute position at the same time, which you can't do. But, I don't see that you have assigned your footer a float or absolute position

nanharbison

take out the float on the sidebar1, that is the only place a float is there

nanharbison

position:absolute;
width:500px;
top:600px;
left:0px;

nanharbison

I added the above code to the footer and could see it fine

rrattie

ASKER

I can do that too, but the problem is that the content is dynamic in length so it has to sit at the bottom of the page whatever that happens to be.

nanharbison

you have to assign it a position or it won't show.
Here is a great article about positioning, mixing fixed divs with liquid divs:
http://www.alistapart.com/articles/holygrail

ASKER CERTIFIED SOLUTION

nanharbison

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rrattie

ASKER

Didn't solve the issue really, but I was able to fine a layout that matched what I was doing and move on.