[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

My footer div isn't visible.

Posted on 2009-04-27
10
Medium Priority
?
513 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:rrattie
  • 7
  • 3
10 Comments
 
LVL 17

Expert Comment

by:nanharbison
ID: 24244159
Are you looking at it in Firefox, IE or some other browser?
0
 
LVL 2

Author Comment

by:rrattie
ID: 24244187
I'm using IE6, FF3 and Chrome/Safari (webkit)
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 24244222
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
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 17

Expert Comment

by:nanharbison
ID: 24244241
take out the float on the sidebar1, that is the only place a float is there
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 24244278
       position:absolute;
        width:500px;
        top:600px;
        left:0px;
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 24244282
I added the above code to the footer and could see it fine
0
 
LVL 2

Author Comment

by:rrattie
ID: 24244443
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.  
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 24244532
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
0
 
LVL 17

Accepted Solution

by:
nanharbison earned 1500 total points
ID: 24244588
Instead of wrestling with this issue, the "holy grail" of css, you can grab a free template here:

http://www.code-sucks.com/css%20layouts/
0
 
LVL 2

Author Closing Comment

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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question