5 Replies - 4191 Views - Last Post: 10 September 2012 - 01:18 PM

#1 knifely  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 16
  • Joined: 03-March 12

Footer is not staying at the bottom

Posted 08 September 2012 - 11:37 AM

Hey everyone

I've been working on a redo of my portfolio and I've come across a problem. I've spent the last 4 hours trying to fix it, and I can't seem to find the problem, I'm sure it's something really stupid and simple and maybe I just need an outside view.

The problem is my footer, or the Div I want to use as my footer is just floating in the middle of my content. I'm still just playing with the design and don't have much content, but no matter what I do it seems the footer div is INSIDE my content div.

I've checked for open ended divs, tried positioning, and I've rewritten the CSS twice already.

Thank you in advance, and I hope someone can shed some light on this because I'm starting to loose it.

HTML
<!DOCTYPE HTML>
<html lang="en">

<head>
	<meta name="keywords" content="michael mike messerli">
	<meta name="description" content="I'm Michael Messerli and am a Hobby programmer and web developer, studying to make it my career">

	<title>Michael Messerli</title>

	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="shortcut icon" href="favicon.ico">

	<link href='http://fonts.googleapis.com/css?family=Wire+One|Tulpen+One|Black+Ops+One|Give+You+Glory|Capriola' rel='stylesheet' type='text/css'>

</head>

<body>
<div class="header">
	<div class="top_bar">
		<div class="wrapper social">
			<a href="#"><img src="images/social/facebook24.png" alt="facebook"></a>
			<a href="#"><img src="images/social/facebook24.png" alt="facebook"></a>
			<a href="#"><img src="images/social/facebook24.png" alt="facebook"></a>
		</div>
	</div>
	<div class="banner">
		<h1 class="banner_title">Michael<br>Messerli</h1>
		<h2 class="banner_sub_title">Hobby Web Developer and Programmer, studying to make it my Career. <a href="#">Read More...</a></h2>
	</div>
	<div class="nav">
		<a href="index.php"><div class="nav_button">Home</div></a>
		<a href="aboutme.php"><div class="nav_button">About Me</div></a>
		<a href="news.php"><div class="nav_button">News</div></a>
		<a href="projects.php"><div class="nav_button">Projects</div></a>
	</div>
</div>

<div class="content">
	<div class="wrapper">
		<div class="block_2">
			<h2 class="title">About Me</h2>
			<p><strong>Welcome, and thanks for stopping by, I'm Michael Messerli.</strong> I'm a 21 year old studying computer Science at the FUB and GIBB in Switzerland. I dabble in Web development and some programming in the little free time I'm not at school or work. Besides throwing code at the screen, I love traveling and spending time with my friends. I've lived all over the World and am happy to settle down and get my degree in Switzerland.</p>
		</div>
		<div class="block_2">
			<h2 class="title">Latest Article</h2>
				<h3 class="sub_title"><a href="#">Mobile Site Relaunch</a></h3>
				<p class="description">With the recent changes and additions to my site, I figured it was a good time to update the mobile site as well. Using jQuery Mobile I was able to give it the face lift it needed. I liked the very basic, business card-like look I had before but was able to fix some bugs I was having and added some tabs. Just a very small version of what's on the desktop site, but gives a good overview of the content.
	The splash page (With the flags that asks you to choose a language), has a line of code that... <a href="#">Read More</a></p>
		</div>
	</div>
</div>

<div style="background: red;">Hello World, I'm a really annoying DIV that always floats
</div>

</body>
</html>



CSS:
@charset "iso-8859-2"
/* CSS Document */
/*
Created By: Michael Messerli
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,image,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
a,a:active { outline:none; text-decoration:none;}
body { line-height:1; color:black; background:white; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }


html 		{background: url('../images/bg.gif'); }
body 		{margin: 0; min-width: 1200px; background-image: url('../images/bg.gif'); }
.wrapper 	{ width: 1200px; margin: 0 auto; }
.floatL 	{ float: left; }
.floatR 	{ float: right; }


/************ Typography ********************/
h1,h2,h3,h4,h5,h6 {	font-family: 'Capriola', sans-serif; color: #333; }
p 			{ font-family: 'Capriola', sans-serif; font-size: .75em; color: #555; }

a 			{color: #fa7400; text-decoration: none;  		}
a:hover 	{color: #fa7400; text-decoration: underline; 	}
a:visited 	{color: #fa7400; text-decoration: none; 	}
a:active 	{color: #fa7400; text-decoration: none; 	}

h1.banner_title {
	font-family: 'Black Ops One', cursive;
	line-height: .8;
	text-align: left;
	font-size: 160px;
	color: #1A1A1A;
}
h2.banner_sub_title {
	font-family: 'Wire One', sans-serif;
	text-transform: uppercase;
	font-size: 45px;
	color: #EEE;
	text-align: right;
}
h2.banner_sub_title a{
	color: #222;
}
h2.title {
	background: url('../images/social/linux3.png') no-repeat top left;
	font-size: 24px;
	padding: 2px 0 10px 25px;
	text-shadow: 1px 1px 1px #1a1a1a;
}
h3.sub_title {
	font-size: 16px;
	padding: 0 0 10px 0;
	color: #FA7400;
	text-shadow: 1px 1px 1px #1a1a1a;
}






/************ Header ********************/
.header {
	width: 100%; height: 700px;
	margin: 0 auto;
	background-image: url('../images/header_bg.gif');
}
.top_bar {
	width: 100%; height: 30px;
	position: fixed;
	text-align: right;
	top: 0;
	background-image: url('../images/black_bg.gif');
	box-shadow: 0 3px 5px black;
	z-index: 999999;
}
.social {
	padding: 5px;
}

.banner {
	width: 800px; height: 400px;
	position: absolute;
	top: 200px; left: 25%;

}


/************ Nav ********************/
.nav {
	position: absolute;
	top: 65px; right: 15%;
	float: right;
	height: 40px;
	margin: 0;
}
.nav_button{
	height: 30px;
	float: left;
	margin: 0 5px 0 5px; padding: 10px;

	font-family: 'Wire One', sans-serif;
	text-align: center;
	font-size: 2.2em;
	color: #fff;
	background-image: url('../images/header_bg.gif');
	border-radius: 5px;
	transition-property: all;
	transition-duration: 1s;
	-webkit-transition-property: all;
	-webkit-transition-duration: 1s;
	-moz-transition-property: all;
	-moz-transition-duration: 1s;
	-o-transition-property: all;
	-o-transition-duration: 1s;

}
.nav_button:hover {
	background-image: url('../images/black_bg.gif');
	border-radius: 5px;
}

/************ Section ********************/
.content .block, .content .block_2, .content .block_3, .content .block_4 {float:left; margin: 0 10px 30px 10px; height: 350px;}

.content {
	margin: 50px 0 0 0;
	background-color: green;
}
.content .block 		{ width: 1180px; }
.content .block_2 		{ width: 580px; }
.content .block_3 		{ width: 370px; }
.content .block_4 		{ width: 260px; }



Attached File(s)



Is This A Good Question/Topic? 0
  • +

Replies To: Footer is not staying at the bottom

#2 amit.soni  Icon User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: Footer is not staying at the bottom

Posted 08 September 2012 - 01:09 PM

style your footer like this...
suppose u have a footer div of class name "footer"

.footer
{
position:absolute;
background:red;
width:100%;
bottom:0;
}



Was This Post Helpful? 0
  • +
  • -

#3 knifely  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 16
  • Joined: 03-March 12

Re: Footer is not staying at the bottom

Posted 08 September 2012 - 01:28 PM

View Postamit.soni, on 08 September 2012 - 01:09 PM, said:

style your footer like this...
suppose u have a footer div of class name "footer"

.footer
{
position:absolute;
background:red;
width:100%;
bottom:0;
}



Thanks amit.soni

But that didn't work, it puts it below the div but then theres still space beneath it like it had a bottom margin of 200px.

Plus I feel there's a way where I shouldn't have to edit the div to stay at the bottom. I mean, when you add a div it's supposed to be positioned relative to the div before it if you haven't changed anything.

I just don't understand why it's acting as if it's inside the prior div.
Was This Post Helpful? 0
  • +
  • -

#4 knifely  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 16
  • Joined: 03-March 12

Re: Footer is not staying at the bottom

Posted 08 September 2012 - 01:45 PM

Also, when I remove the 'float' from the block elements I'm using as coloumns in the content div it works.

But, why is the footer div looking at this when the content div is set, and not floating?
Was This Post Helpful? 0
  • +
  • -

#5 xxxjj18  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 53
  • View blog
  • Posts: 167
  • Joined: 30-November 11

Re: Footer is not staying at the bottom

Posted 10 September 2012 - 12:50 PM

In your footer div, you could add the code:

overflow: hidden;
clear: both;



And inside of your content div put

overflow: hidden;


Was This Post Helpful? 0
  • +
  • -

#6 knifely  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 16
  • Joined: 03-March 12

Re: Footer is not staying at the bottom

Posted 10 September 2012 - 01:18 PM

View Postxxxjj18, on 10 September 2012 - 12:50 PM, said:

In your footer div, you could add the code:

overflow: hidden;
clear: both;



And inside of your content div put

overflow: hidden;



That seemed to fix it! Cheers!

I was trying to avoid setting a set height on the content, obviously to accomodate for difference texts. This seems to have fixed everything. Thanks a lot!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1