7 replies [Last post]
scubadiver007
scubadiver007's picture
Offline
Regular
Last seen: 6 years 24 weeks ago
Joined: 2009-05-28
Posts: 11
Points: 14

I have used the code from this page to keep the footer at the bottom of the page.

Footers at the bottom

In the example code I have attached, I have put text in the "leftcolumn" div and the right "column" div.

What should happen is that either div should force the footer downward but this only happens with the "column" div so I'm not sure how to change it.

Thanks

AttachmentSize
test html.txt1.49 KB
test css.txt2.24 KB
t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 4 years 28 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

My .02

I have worked with this hacked segment of code a few years back. Facebook make it all the rage as at one point in time it was part of their layout. When you begin working with it . . . at least in my opinion. You will find it is buggy, and becomes a huge headache to work around. There will always be cross browser issues. And in essence a great deal of the more important stuff will end up taking a back seat to this singular functionality.

I don't see it in use much these days. Even the sites that show you how to make it work . . . when you look at their actual sites I would say most. If not all of them don't use it at all. You just see a tutorial to drive traffic to their site. There is a reason people don't use it. And I believe a reason Facebook abandoned it. In my opinion you would be better off just letting it go than figuring out down the line after a bunch of trial and error why implementing it doesn't make sense.

scubadiver007
scubadiver007's picture
Offline
Regular
Last seen: 6 years 24 weeks ago
Joined: 2009-05-28
Posts: 11
Points: 14

I can see it sounds like a

I can see it sounds like a cool thing to do but ends up being completely impractical.

I will have a rethink, thanks.

PS. this forum seems incredibly quiet.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 50 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Print holdover

At one time, it was popular among designers to copy the print medium's placement of footer elements. How-to-do-it was the question of the day; so much so that ca 2005 I made my own demo rather than re-invent the wheel each time the issue arose. If you wish to see it: Lock the footer to the bottom of viewport.

I consider the idea totally inappropriate for the web.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

scubadiver007
scubadiver007's picture
Offline
Regular
Last seen: 6 years 24 weeks ago
Joined: 2009-05-28
Posts: 11
Points: 14

I've ignored the idea of

I've ignored the idea of pushing the footer to the bottom because each page will be scrollable anyway.

But I wasn't being quite clear. The problem is that the footer isn't being pushed down by either the "leftcolumn" or "column" divs even though they are being contained within the "maintext" div.

If I use

clear: both

in the footer I just get an ugly gap between "maintext" and "footer" divs.

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 4 years 28 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Re-Think Code

In My opinion you need to re-think some of the way you are writing code. You should get in the habit of floating containers. As that will clear the float. This fixes your problem.

In my opinion your current layout is not very stable.

<style type = "text/css">
	body 	{
		margin: 0px;
		background: #999775;
		}
 
 
	#tophalf
		{
		width: 100%;
		height: 190px;
		background: #3F3E33;
		border-bottom: 1px solid #D9D8C3;
		}
 
 
	#container 
		{
		min-height: 100%;
		position:relative;
		width: 880px;
		padding-top: 40px;
		padding-bottom: 50px;
		margin: 0px auto;
		}
 
 
 
	#title
		{
		padding-top: 60px;	
		padding-left: 10px;
		color: #90907E;
		font-family: "impact";
		font-size: 56px;
		}
 
	#subtitle
		{
		padding-left: 10px;
		font-family: "century gothic";
		font-size: 18px;
		color: #F2F2E1;
		}
 
 
	#image 	
		{
		height: 300px;
		padding: 0px;
		border-top: 1px solid #656451;
		border-left: 1px solid #656451;
		border-right: 1px solid #656451;
		}
 
	#menutext 	
		{
		height: 40px;
		background: #E9E8D7;
		border-left: 1px solid #656451;
		border-right: 1px solid #656451;
		}
 
	#maintext 	
		{
		-position: relative;
		padding: 5px 25px 60px 25px;	
		float:left;
		background: white;
		-border: 1px solid red;
		border-left: 1px solid #656451;
		border-right: 1px solid #656451;
		}
 
 
 
	#leftcolumn	
		{
		float:left;
		margin-top: 14px;
		width: 245px;
		padding: 15px;
		text-align: left;
		color: #000;
		font-family: "century gothic";
		font-size: 12px;
		border: 1px solid #878675;
		background: #E9E8D7;
		}
 
 
	#column {
		margin-left: 300px;
		text-align: justify;
		color: #000;
		font-family: "century gothic";
		font-size: 14px;
		line-height: 26px;
		}
 
	#column ol.a
		{
		text-align: left;
		}
 
	#column img
		{
		padding-right: 15px;
		}
 
	#hashtag
		{
		position: absolute;
		padding: 10px;
		top: 260px;
		color: #F2F2E1;
		font-family: "century gothic";
		font-size: 18px;
		}
 
	#hashtag a
		{
		text-decoration: none;
		color: #90907E;
		}
 
	#hashtag a:hover
		{
		text-decoration: none;
		color: #F2F2E1;
		}
 
 
	#footer 	
		{
			float:left;
			width:867px;
		padding: 15px 5px 15px 5px;	
		margin-top: 0px;
		background: #3F3E33;
		color: #999775;
		font-family: "century gothic";
		border-left: 1px solid #D9D8C3;
		border-right: 1px solid #D9D8C3;
		border-bottom: 1px solid #D9D8C3;
		}
 
	<!--[if lt IE 7]>
	<style>

I am not 100% sure what your are trying to do with that giant top margin. You also need to research web semantics. You specify text with a <p> tag "paragraph" this tells the search engine and browser that this is supposed to be a paragraph. http://en.wikipedia.org/wiki/Semantic_Web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
  <style type = "text/css">
	* { margin:0; padding:0; }
	a img { border-style:none; }
	a { text-decoration:none; } 
	ul li { list-style-type:none; margin:0; padding:0; }
	hr { margin:0; padding:0; display:none; }
 
	body { 	background: #999775; }
	#container { width: 880px; margin:0px auto; padding:40px 0 50px 0; }
	#image 	{ width:100%; float:left; height:300px; border-top:1px solid #656451; border-left:1px solid #656451; border-right:1px solid #656451; 	}
	#menutext 	{ float:left; width:100%; height: 40px; background: #E9E8D7; border-left: 1px solid #656451; 	border-right: 1px solid #656451; }
	#maintext 	{ float:left; width:100%; background-color:#fff; -border: 1px solid red; border-left: 1px solid #656451; border-right: 1px solid #656451; 	}
	#leftcolumn {	float:left; margin:14px; width:245px; background-color:#E9E8D7; border:1px solid #878675; }
	#leftcolumn p { padding:15px; text-align:left; color:#000; font-family:"century gothic"; font-size: 12px; }
	#column { float:left; width:580px; margin:14px 0 0 0; }
	#column p { text-align: justify;  color:#000; font-family:"century gothic"; 	font-size:14px; line-height:26px; }
	#footer { float:left; 	width:100%; background:#3F3E33; color:#999775; font-family:"century gothic"; border-left:1px solid #D9D8C3; border-right:1px solid #D9D8C3; border-bottom:1px solid #D9D8C3; }
	#footer p { float:left; width:100%; text-align:center; padding:5px 0; font-size:.85em; }
	#footer > ul { float:left; padding:5px 0; width:100%; text-align:center; }
	#footer > ul li { display:inline; padding:0 10px; border-left:1px solid #656451; }
	#footer > ul li:first-child { border:none; }
  </style>
</head>
 
<body>
 
<div id="container">
 
  <div id="image"></div>
  <div id="menutext"></div>
 
  <div id="maintext">
    <div id="leftcolumn">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id magna pretium, feugiat tortor hendrerit, eleifend dolor. Vivamus porttitor viverra eros vitae faucibus. Donec volutpat elementum ante, nec pretium erat sollicitudin vel. Donec vitae elementum tellus. Cras ultrices diam ultrices arcu lobortis posuere. Duis massa sem, molestie et blandit vitae, lobortis ut ipsum. Vestibulum lacinia consectetur dolor, vel tristique nibh tempor a. Donec tempus lacinia pretium. Proin a justo nec massa porta eleifend. Ut id porttitor nisl. Maecenas congue dui eget malesuada luctus. Pellentesque facilisis massa ac porttitor eleifend. Nam sollicitudin in sem at fermentum. Donec ut est eget nisi egestas ornare nec vitae velit. Phasellus neque tortor, tempor eget accumsan vel, condimentum et urna.</p> 
    </div>
    <div id="column">
      <p>Proin pretium dapibus mi, id aliquam lorem porta a. Duis consectetur risus id rutrum luctus. Suspendisse non orci ut augue suscipit bibendum. Praesent pulvinar fermentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
    </div>
  </div>
 
  <div id="footer">
    <p>Copyright &copy; 2014</p>
    <ul>
      <li>Section 1</li>
      <li>Section 2</li>
      <li>Section 3</li>
      <li>Section 4</li>
      <li>Section 5</li>
    </ul>
  </div>
 
</div>
 
</body>
</html>

scubadiver007
scubadiver007's picture
Offline
Regular
Last seen: 6 years 24 weeks ago
Joined: 2009-05-28
Posts: 11
Points: 14

thanks

I'm not a CSS expert by any means and this a personal project so thanks.

I discovered

<p>

because I didn't want to use

<br> 

to separate paragraphs. Is there a better method?

The top box is for an image and the website info, and the second box is for the navigation.

Also, what does this mean?

> ul 

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 4 years 28 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Web Semantics

You should do some research on web semantics. And go beyond doing something to get a desired visual result. You "mark up" the code in a manner so it has meaning to the browser and more importantly the search engine. As you can technically do the same thing with a < div> tag as you can with a < p> tag. But by using a < p> tag you tell the search engine specifically. "This is a paragraph and content you should index. This content is not code. It is the text people will read . . . so please crawl it and index it"

Example of good Web Semantings

<h1>How to Grow Tomatoes (H1 = Header tag and what the entire page is about.  It is secondary to <title>)</h1>
<p>How you should grow tomatoes text. Plant the tomatoes . . .. </p>
<h2>Light Requirements of Tomato Plants (Section on Light Requirements of Tomato Plants)</h2>
<p>Tomatoes grow best in moderate light . . . .</p>
<h3>Soil Requirements of the Tomato Plants<.h3>
<p>Tomato Plants grow best in an acidic soil . . . . text text text</p>
<h4>Another Section</h4>
<p>Text</p>
<h5>Another Section</h5>
<p>Text</p>
<h6>Another Section</h6>
<p>Text</p>

If you write your code in the manner above. It aids the search engine identifying the important content so other people can find it when they run a google search. There is no "better" way to do it. That is how you do it. You use < p> / paragraph tags for text and < h1> - < h6> for section headings.

< ul> is an unordered list. There are two types of lists. Ordered, and unordered. In my opinion < ul> / list items are one of the most powerful things you can learn to use in HTML. http://www.w3schools.com/tags/tag_ul.asp There are almost always the head and foot menus. But they can be used for many many many things.