CODEWITHSUNDEEP
htmlcssfooter
Esther
Esther

Reputation: 15

My footer is hanging out at the top

I already have a home page where the footer is behaving nicely, and I copied the same css to my contact page, and now the footer is hanging out above the navigation bar and I have tried so many things for the better part of a day but for the life of me can't get it to the bottom. I don't want the footer to be fixed, and I have already tried clear:both, as well as numerous other things I am looking for a purely css solution to my problem:

@import url(http://fonts.googleapis.com/css?family=Special+Elite);
/*font-family: 'Special Elite', cursive;*/
@import url(http://fonts.googleapis.com/css?family=Marvel:400,400italic,700,700italic);
/*font-family: 'Marvel', sans-serif;*/
#container {
	min-height:100%;
	position:relative;
	margin:0 auto -80px;
}
body {
	height:100%;
}
#background {
	background-image:url('css.jpg');
	background-position:center fixed;
	background-size:cover;
	background-attachment:fixed;
}
.navbar {
	position:fixed;
	width:100%;
	z-index:1;
	margin-top:10px;
}
ul {
	text-align:center;
	background-color:#7A4909;
}
li {
	list-style:none;
	margin-right:1em;
	font-family:'Special Elite', cursive;
	font-size:35px;
	padding:12px;
	display:inline-block;
}
li a {
	color:#D0903C;
	background-color:#7A4909;
	text-decoration:none;
	display:inline-block;
}
.left a:hover {
	color:#7A4909;
	background-color:#D0903C;
	-webkit-transform:rotate(-10deg) scale(1.2);
	   -moz-transform:rotate(-10deg) scale(1.2);
	     -o-transform:rotate(-10deg) scale(1.2);
	text-transform:uppercase;
}
.right a:hover {
	color:#7A4909;
	background-color:#D0903C;
	-webkit-transform:rotate(10deg) scale(1.2);
	   -moz-transform:rotate(10deg) scale(1.2);
	     -o-transform:rotate(10deg) scale(1.2);
	text-transform:uppercase;
}
#parent {
	position:relative;
}
#child {
	position:absolute;
	top:50%;
	left:50%;
	height:30%;
	width:50%;
	margin:15% 0 0 -25%;
}
.basic-grey {
    margin-left:auto;
    margin-right:auto;
    max-width: 500px;
    background: #F7F7F7;
    padding: 25px 15px 25px 10px;
    font: 12px 'Special Elite', cursive;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
    border:1px solid #E4E4E4;
}
.basic-grey h1 {
    font-size: 25px;
    padding: 0px 0px 10px 40px;
    display: block;
    border-bottom:1px solid #E4E4E4;
    margin: -10px -15px 30px -10px;;
    color: #888;
}
.basic-grey h1>span {
    display: block;
    font-size: 15px;
	font-family:'Marvel', sans-serif;
}
.basic-grey label {
    display: block;
    margin: 0px;
}
.basic-grey label>span {
    float: left;
    width: 20%;
    text-align: right;
    padding-right: 10px;
    margin-top: 10px;
    color: #888;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {
    border: 1px solid #DADADA;
    color: #888;
    height: 30px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 3px 3px 3px 5px;
    width: 70%;
    font-size: 12px;
    line-height:15px;
    box-shadow: inset 0px 1px 4px #ECECEC;
    -moz-box-shadow: inset 0px 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
    padding: 5px 3px 3px 5px;
}
.basic-grey select {
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    width: 70%;
    height: 35px;
    line-height: 25px;
}
.basic-grey textarea{
    height:100px;
}
.basic-grey .button {
    background: #7A4909;
    border: none;
    padding: 10px 25px 10px 25px;
    color: #D0903C;
    box-shadow: 1px 1px 5px #B6B6B6;
    border-radius: 3px;
    text-shadow: 1px 1px 1px #9E3F3F;
    cursor: pointer;
	font-family:'Special Elite', cursive;
	font-size:15px;
}
.basic-grey .button:hover {
    background: #D0903C;
	text-transform:uppercase;
	color:#7A4909;
}
#footer {
	height:80px;
	width:100%;
	background-color:#7A4909;
	position:absolute;
}
<html>
	<head>
		<meta charset="utf-8">
		<title>Contact Me!</title>
		<link media="screen" type="text/css" rel="stylesheet" href="contact.css"/>
	</head>
	<div id="container">
	<body id="background">
		<ul class="navbar">
			<li class="left"><a href="home.html">Home</a></li>
			<li class="right"><a href="contact.html">Contact Me</a></li>
			<li class="left"><a href="blog.html">Blog</a></li>
			<li class="right"><a href="funny.html">Funny</a></li>
		</ul>
		<div id="parent">
			<div id="child">
			<form action="mailto:[email protected]" method="post" class="basic-grey">
				<h1>Contact Form
					<span>Please fill out all fields.</span>
				</h1>
				<label>
					<span>Your Name :</span>
					<input id="name" type="text" name="name" placeholder="Your Full Name" />
				</label>
   
				<label>
					<span>Your Email :</span>
					<input id="email" type="email" name="email" placeholder="Valid Email Address" />
				</label>
   
				<label>
					<span>Message :</span>
					<textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
				</label>
				<label>
					<span>Subject :</span><select name="selection">
					<option value="General Question">General Question</option>
					<option value="About Me">About Me</option>
					<option value="Request">Request</option>
					</select>
				</label>    
				<label>
					<span>&nbsp;</span>
					<input type="button" class="button" value="Send" />
				</label>    
			</form>
			</div>
			</div>
		<div id="footer"></div> <!--end footer div-->
	</body>
	</div> <!--end container div-->
</html>

Upvotes: 0

Views: 433

Answers (1)

Goos van den Bekerom
Goos van den Bekerom

Reputation: 1493

Just add bottom: 0; to your #footer CSS.

It already has position: absolute but you don't assign it a position.
Thats why it's at the top

EDIT

In the fiddle I have noticed that you have a lot more problems with your code, here are some:

  • You open your container div before the body, and you close it after.
  • your body has no height because your <html> is 0px high. make <html> height: 100%
  • your #parent div has nothing but position: relative and when I change this, the whole page falls out of place.
  • When you do all of this and then add bottom: 0; to your #footer it will work (but still not good).

You should really sort all of this out and I highly recommend you to google how to build an html webpage with float: left; and that you stop using position if its not needed.
This page is not likely to be saved in this condition.

Good luck ;)

Upvotes: 2

Related Questions