CODEWITHSUNDEEP
htmlcss
wallensteiN
wallensteiN

Reputation: 23

Footer overrides the content of my website

As the title says, footer overrides the content of the website and it won't go to the bottom of the page. Any ideas? Here is a screenshot: http://prntscr.com/4zoamr and here is my CSS code:

/* MAIN STYLES */

body{
background: url("bg.jpg") fixed no-repeat center;
margin: 0;
padding: 0;
color: #FFF;
}

a{
text-decoration: none;
color: #FFF;
}

a:active{
text-decoration: none;
color: #FFF;
}

a:hover{
text-decoration: none;
color: #FFF;
}

a:visited{
text-decoration: none;
color: #FFF;
}

/* HEADER */

#header{
background: #111;
width: 100%;
height: 190px;
border-bottom: 10px solid #891614;
}

#header #logo{
font-family: Century Gothic;
font-size: 30px;
padding-top: 1px;
padding-left: 50px;
}

#header #menu{
font-family: Century Gothic;
text-transform: lowercase;
font-size: 17px;
padding-left: 10px;
padding-top: 10px;
line-height: 18px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
}

#header #menu a{
padding-left: 5px;
padding-right: 15px;
}

#header #menu a:hover{
color: #b0b0b0;
}

/* END HEADER */

/* CONTENT */

#content{
width: 1100px;
padding: 30px;
margin: 0 auto;
}

/* ARTICLE */

#content #article{
float: left;
width: 700px;
}

#content #article h1{
background: #891614;
border: 1px solid #111;
line-height: 18px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
padding-top: 15px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid #000;
height: 25px;
font-family: Century Gothic;
font-size: 23px;
font-weight: 100;
}

#content #article p{
background: rgba(0, 0, 0, 0.7);
line-height: 18px;
box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 1px solid #000;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid #000;
height: 25px;
font-family: Century Gothic;
font-size: 17px;
}

/* END ARTICLE */

/* SIDEBAR */

#content #sidebar{
float: right;
width: 350px;
}

#content #sidebar h1{
background: #891614;
border: 1px solid #111;
line-height: 18px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
padding-top: 15px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid #000;
height: 25px;
font-family: Century Gothic;
font-size: 23px;
font-weight: 100;
}

#content #sidebar p{
background: rgba(0, 0, 0, 0.7);
line-height: 18px;
box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 1px solid #000;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid #000;
height: 25px;
font-family: Century Gothic;
font-size: 17px;
}

/* END SIDEBAR */

#content #footer{
width: 1088px;
position: absolute;
background: #891614;
border: 1px solid #111;
line-height: 18px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
padding-top: 15px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid #000;
height: 25px;
font-family: Century Gothic;
font-size: 17px;
}

#content #footer #copyright{
float: left;
}

#content #footer #links{
float: right;
padding-bottom: 10px;
padding-right: 10px;
}


/* END CONTENT */

So, how can I get my footer at the bottom of my page? I tried using the "bottom" property but it still overrides the content, I also tried the "margin-top" but it didn't work as I wanted.

EDIT: HTML Code here:

<html>
<head>
<title>Pwned Gaming - Website</title>

<link href="styles.css" type="text/css" rel="stylesheet" />

</head>
<body>

<!-- HEADER -->

<div id="header">

<!-- LOGO -->

<div id="logo">

<h1>pwned-gaming.com</h1>

</div>

<!-- END LOGO -->

<!-- MENU -->

<div id="menu">

<a href="index.html">Home</a>
<a href="#">Forum</a>
<a href="news.html">News</a>
<a href="team.html">Squad</a>
<a href="pwned_tv.html">Pwned TV</a>
<a href="media.html">Media</a>
<a href="contact.php">Contact</a>

</div>

<!-- END MENU -->

</div>

<!-- END HEADER -->



<!-- CONTENT -->

<div id="content">

<!-- ARTICLE -->

<div id="article">

<h1>Welcome on pwned-gaming.com</h1>

<p> &bull; Welcome on our brand new website.</p>

<h1>Welcome on pwned-gaming.com</h1>

<p> &bull; Welcome on our brand new website.</p>

<h1>Welcome on pwned-gaming.com</h1>

<p> &bull; Welcome on our brand new website.</p>

</div>

<!-- END ARTICLE -->

<!-- SIDEBAR -->

<div id="sidebar">

<h1>Welcome, user.</h1>

<p> &bull; Welcome on our brand new website.</p>

</div>

<!-- END SIDEBAR -->

<!-- FOOTER -->

<div id="footer">

<div id="copyright">

&copy; Pwned Gaming - 2011 - 2014.

</div>

<div id="links">

<a href="http://facebook.com"><img src="fb.png" /></a>
<a href="http://twitter.com"><img src="tw.png" /></a>
<a href="http://youtube.com"><img src="yt.png" /></a>

</div>

</div>

<!-- END FOOTER -->

</div>

<!-- END CONTENT -->

</body>
</html>

Upvotes: 0

Views: 659

Answers (1)

A.B
A.B

Reputation: 20445

have you tried clearing both sides of footer?

add this to footer style

 clear:both;

and remove absolute position property and bottom etc also from your footer

Upvotes: 3

Related Questions