5 Replies - 1513 Views - Last Post: 07 January 2013 - 10:54 AM

#1 danbywinby  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 108
  • Joined: 06-January 13

CSS Footer not staying at bottom and moving with content

Posted 06 January 2013 - 01:20 PM

Hey Guys

I have a problem with my CSS i have tried to code it so that the footer will stay down at the bottom but it isnt working for whatever reason please help.

This is my code

CSS
/* All Page Elements */

Body
	{
	background: url("./images/background.jpg");
	background-color: #3c3231;
	background-repeat: no-repeat;
	}
	
.header
	{
	background: url("./images/header_background.png");
	background-color: white;
	background-position: center;
	background-repeat:no-repeat;
	position: absolute;
	width: 954px;
	height: 90px;
	margin-left: -475px;
	margin-right: auto;
	left: 50%;
	top: 0px;
	color: black;
	font-family: Arial;
	text-align: center;
	}
	
.container
	{
	background-color: white;
	position: relative;
	width: 954px;
	top: 70px;
	margin-left: -475px;
	margin-right: auto;
	left: 50%;
	min-height: 100%;
	}
	
.content
	{
	position: relative;
	width: 954px;
	margin: 20px;
	width: 912px;
	font-family: Arial;
	text-align: center;
	min-height: 100%;
	}
	
.clear
	{
	clear: both;
	}
	
.footer
	{
	background-color: white;
	position: relative;
	bottom: 0;
	width: 100%;
	height: 150px;
	}
	
.footer-text1
	{
	color: #333333;
	font-family: Arial;
	float: left;
	width: 45%;
	margin-left:4%;
	height: 100%;
	}
	
.footer-links li a
	{
	text-decoration: none;
	color: #333333;
	}
	
.footer-text2
	{
	color: #333333;
	font-family: Arial;
	float: right;
	width: 45%;
	height: 100%;
	}

	
/* Navigation Menu */
	
.navigationbar
	{
	position: relative;
	list-style-type: none;
	margin: 2%;
	padding: 0;
	width: 96%;
	background: #0132AC;
	float: left;
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
	}
	
.navigationbar li a
	{
	font-family: Arial;
	text-decoration: none;
	width: 16%;
	position: relative;
	left: 10%;
	color: white;
	float: left;
	text-align: center;
	}
	
.navigationbar li a:hover
	{
	background: red;
	}
	

/* Home Page Elements */
	
.home-page-slideshow-description
	{
	position: relative;
	top: 0px;
	color: #7247d7;
	width: 730px;
	font-family: Arial;
	text-align: center;
	}
	
.home-page-slideshow
	{
	position: relative;
	left: 10px;
	width: 894px;
	height: 200px;
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
	}
	
.home-page-slideshow>img
	{
	width: 894px;
	height: 200px;
	}
	
.homepage-desc1
	{
	padding: 10px;
	position: relative;
	color: white;
	background-color: #01326D;
	width: 98%;
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
	}
	
.youtube-video
	{
	position:relative;
	top: 15px;
	float: right;
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
	}




HTML
<!DOCTYPE html>

<html lang="en">

<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>                              <!-- Meta Stuff Required -->
	<link rel="stylesheet" type="text/css" href="styles.css" />                                       <!-- CSS -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>               <!-- JQuery -->
	<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <!-- Jquery Cycle -->


	<script> <!-- Image/Text rotator requires JQuery Cycle above ^^/>/>^^/> -->
	$('.home-page-slideshow').cycle({
		fx: 'fade',
        timeout: 3000
	});
	</script>
	
	<script>
	var currentTime = new Date()
	var month = currentTime.getMonth() + 1
	var day = currentTime.getDate()
	var year = currentTime.getFullYear()
	</script>
	
	<title>
		JWT Haulage Group
	</title>
	
</head>

<body>
	
	<div class='header'>
	
		<h1>JWT Haulage Group Logo</h1>
		
	</div>

	<div class='container'>
		
		<ul class='navigationbar'>
			
			<li><a href="index.html">Home</a></li>
			<li><a href="#">News</a></li>
			<li><a href="#">ETS2</a></li>
			<li><a href="#">UKTS/GTS</a></li>
			<li><a href="#">Contact</a></li>
				
		</ul>
			
		<div class='content'>
		
			<hr>
		
			<div class='homepage-desc1'>
			
				JWT Haulage Group Ltd. Is a Virtual Trucking Company for various truck simulation games developed by SCS Software.
				
			</div>
			
			<div class='youtube-video'>
			
				<iframe 
					width="420" 
					height="345"
					src="http://www.youtube.com/embed/OGJu04tVIWg">
				</iframe>
				
			</div>
			
			<hr>
			
		</div>
		
		<div class='clear'>
		</div>
		
		<div class='footer'>
		
			<div class='footer-text1'>
			
				<h3>Links:</h3>
				
				<ul class='footer-links'>
				
					<li><a href="#">Site Map</a></li>
					
				</ul>
				
			</div>
			
			<div class='footer-text2'>
		
				</br>
				</br>
				<script>
					document.write("Date: " + month + "/" + day + "/" + year)
				</script>
				
			</div>
			
			<div class='clear'>
			</div>
			
		</div>
		
	</div>
		
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: CSS Footer not staying at bottom and moving with content

#2 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,544
  • Joined: 12-December 12

Re: CSS Footer not staying at bottom and moving with content

Posted 06 January 2013 - 02:48 PM

Depends what you mean by "stay down at the bottom"..? At the moment, it is where it is supposed to be: below the main content, following the flow of the document.

If you want to push it further down you could give it a margin-top.
If you want it stuck to the bottom of the viewport (so that content at the bottom might scroll behind it) then you could consider position: fixed. Possibly position: absolute, but you need to be careful that it doesn't then overlap the main content.

This post has been edited by andrewsw: 06 January 2013 - 02:52 PM

Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,544
  • Joined: 12-December 12

Re: CSS Footer not staying at bottom and moving with content

Posted 06 January 2013 - 02:56 PM

height: 100% on an element won't work unless its parent has a specified height, or all its parent elements (including body and html) also have height: 100%. Even so (with this second approach) it won't behave as you quite expect. That is, you might expect it to stretch to the height of the browser window, but it will extend beyond this.
Was This Post Helpful? 1
  • +
  • -

#4 danbywinby  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 108
  • Joined: 06-January 13

Re: CSS Footer not staying at bottom and moving with content

Posted 06 January 2013 - 05:00 PM

View Postandrewsw, on 06 January 2013 - 02:48 PM, said:

Depends what you mean by "stay down at the bottom"..? At the moment, it is where it is supposed to be: below the main content, following the flow of the document.

If you want to push it further down you could give it a margin-top.
If you want it stuck to the bottom of the viewport (so that content at the bottom might scroll behind it) then you could consider position: fixed. Possibly position: absolute, but you need to be careful that it doesn't then overlap the main content.


What I want is for it stay at the bottom of all of the content on the page so if there is a lot of content it will be below the viewport so the user will have to scroll down to see it and if there is not a lot if content then it will be visible in the viewport. At the moment it's just behaving weirdly and to be honest with you I think I've mucked it up lol I am a beginner with web development.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,544
  • Joined: 12-December 12

Re: CSS Footer not staying at bottom and moving with content

Posted 06 January 2013 - 05:08 PM

Correct the two </br> - should just be <br>. But I would remove them anyway: use margins to separate elements.

If it is not working after these corrections then you'll need to describe what you mean by "behaving weirdly".

I would change Body to body in the css. css is not case-sensitive (except for certain properties) but I prefer to pretend that it is. But that's just me!

This post has been edited by andrewsw: 06 January 2013 - 05:11 PM

Was This Post Helpful? 1
  • +
  • -

#6 danbywinby  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 108
  • Joined: 06-January 13

Re: CSS Footer not staying at bottom and moving with content

Posted 07 January 2013 - 10:54 AM

Thank You Andrewsw

It seems to be working fine now just gotta hope that it stays that way. Fingers crossed
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1