I'm trying to put the footer at the bottom of the page.
My html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main">
<header id="main__header">
<div id="logo"></div>
<div id="search">
<form>
<input type="text" value="Search..." />
</form>
</div>
<nav>
<ul>
<li id="home">Home</li>
<li id="about">About Us</li>
<li id="carrers">Carrers</li>
<li id="newsletter">Newsletter</li>
<li id="contact">Contact</li>
</ul>
</nav>
</header>
<section id="body__section">
<section id="left__section" class="margin__section">
<article id="news1">
<img src="images/pic.jpg" width="200" height="170" alt="pic1" />
<header> </header>
<div>
<p> </p>
</div>
</article>
<article id="news2">
<img src="images/pic.jpg" width="200" height="170" alt="pic2" />
<header> </header>
<div>
<p> </p>
</div>
</article>
<article id="news3">
<img src="images/pic.jpg" width="200" height="170" alt="pic2" />
<header> </header>
<div>
<p> </p>
</div>
</article>
<article id="news4">
<img src="images/pic.jpg" width="200" height="170" alt="pic3" />
<header> </header>
<div>
<p> </p>
</div>
</article>
</section>
<section id="right__section" class="margin__section">
<aside id="social"></aside>
<aside class="ad"></aside>
<aside class="ad"></aside>
</section>
</section>
<footer> </footer>
</div>
</body>
</html>
My style.css
* {
margin: 0;
padding: 0;
}
html, body, #main {
height: 100%;
}
html, body, #main_header, nav, ul, footer {
width: 100%;
}
#main {
position: relative;
margin: 0 auto;
width: 1100px;
}
#main__header {
position: relative;
height: 180px;
margin: 0 auto;
background-color: #ff532a;
}
#logo {
position: relative;
top: 5px;
left: 20px;
border: 1px solid #fff;
width: 206px;
height: 75px;
}
#search {
position: absolute;
top: 5px;
right: 20px;
}
nav {
position: absolute;
bottom: 10px;
}
ul {
display: block;
list-style-type: none;
clear: right;
width: 1061px;
margin: 0 auto;
}
nav ul li {
display: block;
width: 209px;
float: left;
margin-left: 4px;
}
#home {
margin-left: 0px !important;
}
nav ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #fff;
font-size: 1.4em;
height: 35px;
padding: 5px;
border: 1px solid #fff;
border-radius: 8px;
}
#body__section {
width: 100%;
height: 100%;
padding-bottom: 20px;
}
#left__section {
width: 810px;
height: 100%;
float: left;
}
#right__section {
width: 250px;
height: 100%;
float: right;
border-top: 1px solid #d2d3d2;
}
.margin__section {
margin-top: 30px;
}
article {
position: relative;
border-top: 1px solid #d2d3d2;
border-bottom-width: thin;
height: 230px;
width: 100%;
}
section article img {
margin: 30px;
}
section article div {
position: absolute;
top: 30px;
right: 0px;
width: 550px;
height: 170px;
background-image: url('images/article.jpg');
}
.border__solid {
border: 1px solid #000;
}
#right__section aside {
width: 100%;
margin-top: 30px;
}
#social {
height: 50px;
background-color: #e7e8e7;
}
.ad {
height: 377px;
background-color: #ffffa1;
}
footer {
left: 0px;
right: 0px;
bottom: 0px;
height: 180px;
background-color: #beb0ff;
}
The problem is that the gray footer stays in the middle under the section. I really want the footer to be at the bottom of the page, not fixed.
screenshot
You need to add an element with "clear: both" after the two floating sections that you have inside your container section. Then you have to remove the "height: 100%" from your container section.
So, add to your css:
.clear {
clear: both;
}
Change your "#body__section" to:
#body__section {
width: 100%;
height: auto;
padding-bottom: 20px;
}
And add to your html, just before the end of the "body__section":
<div class="clear"></div>
I recommend to use this CSS...
#main {
position: relative;
margin: 0 auto;
width: 1100px;
min-height: 100%;
padding-bottom: 180px;
}
footer {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 180px;
background-color: #beb0ff;
}
...and take the 'main element out of this rule:
html, body, #main {
height: 100%;
}
so it becomes
html, body {
height: 100%;
}
This makes the footer a child of #main, absolutely positioned at its bottom, with enough padding-bottom on #main to prevent any overlapping(180px, like the height of the footer), and a min-height of 100% for #main to ensure the footer is also at the bottom on pages which aren't that high.
These changes will fix things for you:
#main {
position: relative;
margin: 0 auto;
height: auto; //changing to auto
width: 1100px;
}
footer {
left: 0px;
right: 0px;
bottom: 0px;
height: 180px;
background-color: #beb0ff;
position: relative; //changing to relative
clear: both; //clearing previous divs
}
Hope this helps!
Related
I used the below codes to create a HTML page where I kept header and footer tags in body tag. The height of header is 16% and footer is 5%. Now I inserted a div tag in body and gave a height of 79%(100-16-5%) but when I ran the code the height of the div tag is zero, why is it and how to align the div tag between header and footer.
Code:
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
}
header{
position: absolute;
background-color: red;
height: 16%;
width: 100%;
margin-bottom: 5px;
top: 0;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
.body_1{
background-color:blueviolet;
height: 79%
}
footer{
background-color: red;
position: absolute;
height:5%;
width: 100%;
bottom: 0;
}
<header>
<div id='hd_div1' class='hd_div'></div>
<div id='hd_div2' class='hd_div'>Hello This a test text </div>
<div id='hd_div3' class='hd_div'></div>
<div class='logo'>
<img id='head_img' src='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'></div>
<footer>
<div id='foot1'></div>
</footer>
Image:
.body_1 has hight 0 because you body has height 0.
Both header and footer are positioned absolutely which ignores body in this case.
Simple solution will be to tell body to have a height of 100vh (whole window height) but you will have to apply margin from top to .body_1 so it will not be placed under header
Using position: absolute when it is not necessary is overall a bad approach to problem.
A god solution will be to set body to display: grid which has been created for this type of job.
more about grid
In this snipper I have added grid to body element and removed heights from header, .body_1 and footer (their height is now set with grid-template-rows so there is no point to set them in those elements).
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 16% auto 5%;
height: 100vh;
}
header{
background-color: red;
width: 100%;
position: relative;
}
.body_1{
background-color:blueviolet;
}
footer{
background-color: red;
width: 100%;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
<header>
<div id='hd_div1' class='hd_div'> </div>
<div id='hd_div2' class='hd_div'>Hello This a test text </div>
<div id='hd_div3' class='hd_div'></div>
<div class='logo'>
<img id='head_img' src='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'></div>
<footer>
<div id='foot1'></div>
</footer>
This is exactly your code, and the body_0 is blueviolet:
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
}
header{
position: absolute;
background-color: red;
height: 16%;
width: 100%;
margin-bottom: 5px;
top: 0;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
.body_1{
background-color:blueviolet;
height: 79%
}
footer{
background-color: red;
position: absolute;
height:5%;
width: 100%;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
<link rel='shortcut icon' type='image/x-icon' href='data:image/png;base64,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' />
<title>Search</title>
</head>
<body>
<header>
<div id='hd_div1' class='hd_div'> </div>
<div id='hd_div2' class = 'hd_div'>Hello This a test text </div>
<div id='hd_div3' class = 'hd_div'></div>
<div class ='logo'>
<img id='head_img' src ='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'> </div>
<footer>
<div id='foot1'></div>
</footer>
</body>
</html>
Within my header, I am trying to place pending-button-notification over theimages-cart image. For some reason, the pending-button-notification div is showing on the left side of the header div.
Does anyone see why this isn't placing correctly?
This is the problematic code:
<div id="pending-order-button">
<a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
<div id="pending-button-notification"></div>
</a>
</div>
header {
width: 100%;
max-width: 100%;
height: 100px;
position: relative;
border-bottom: 1px solid #E5E5E5;
}
#header-wrap {
width: 90%;
height: 100%;
margin: auto 5%;
}
#header-logo {
width: 200px;
height: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.header-buttons {
width: 30px;
height: auto;
float: right;
margin: 30px 40px 0 50px;
cursor: pointer;
}
.header-buttons:first-child {
margin-right: 0;
}
#pending-order-button {
position: relative;
}
#pending-button-notification {
border-radius: 15px;
background: #09afdf;
height: 25px;
width: 25px;
position: absolute;
color: #FFF;
font-size: 1.3rem;
top: 5px;
left: 5px;
text-align: center;
}
<header>
<div id="header-wrap">
Logo
<img src="images/menu.png" class="header-buttons" alt="Pending Orders">
<div id="pending-order-button">
<a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
<div id="pending-button-notification"></div>
</a>
</div>
</div>
</header>
It's your float:right on .header-buttons which is causing the problem.
I suggest that you remove that and float the #pending-order-button div instead so that it and all it's content is moved to the right.
#pending-order-button {
position: relative;
float:right;
}
I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<div class="link">Home</div>
<div class="link">Wie is wie</div>
<div class="link">Foto's</div>
<div class="link">Repertoire</div>
<div class="link">Links</div>
<div class="link">Contact</div>
</div>
</div>
<div class="clear"></div>
<div id="content">
TEST
</div>
<div class="clear"></div>
<div id="footer">
<div id="copy">
Developed by Yoshi © vAntstAd
</div>
</div>
</body>
</html>
CSS:
/* PAGE LAYOUT */
html
{
padding: 0px;
margin: 0px;
}
body
{
background-image: url(../IMAGES/background.png);
padding: 0px;
margin: 0px;
color: white;
font-family: 'Source Sans Pro', serif, sans-serif;
}
.clear
{
clear: both;
}
/* HEADER */
#header
{
width: 1100px;
height: 150px;
background-color: #282828;
margin: auto;
border-bottom: solid;
border-color: red;
}
#logo
{
width: 283px;
height: 100px;
margin: auto;
}
#logotitel
{
width: 1100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: x-large;
}
/* NAV */
#nav
{
width: 1100px;
height: 50px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
background-color: red;
}
#links
{
width: 600px;
height: 50px;
margin: auto;
}
.link
{
width: 100px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
color: white;
text-decoration: none;
}
.link:hover
{
color: #282828;
text-decoration: underline;
}
/* CONTENT */
#content
{
width: 1100px;
height: auto;
margin: auto;
color: #282828;
position: relative;
}
/* FOOTER */
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
margin: auto;
background-color: #282828;
}
#copy
{
width: auto;
float: right;
margin-right: 5px;
height: 50px;
line-height: 50px;
}
Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.
Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/
Therefore, footer would become:
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
left:50%; /* Add this */
margin-left:-550px; /* Add this (this is half of #footers width) */
background-color: #282828;
}
If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute
To have a footer at the bottom, centered horizontally, you can apply the following CSS:
footer{
width: 100%;
max-width: 600px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
This will center the fixed element, but will also keep it responsive, as it will shrink when the browser has become less wide than the footer.
See this Fiddle for an example
I need to build this Site Mockup
Here is what I have right now Site
When you scroll down to the bottom of the page you see that height of the Layout does not fit (there remains a black line on the bottom).
I tried some adjustments, but the height of the Layout is still wrong.
What can be done to fix it?
Here is my code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RW-Fliesen</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="contact-info" title="contact- info"></div>
<ul class="mn">
<li> </li>
<li> </li>
<li> </li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="content">
<div id="top">
<div class="foto1" title="Fliesen"> <img src="foto1.png" alt="Fliesen1"/> </div>
<div class="foto2" title="Fliesen"> <img src="foto2.png" alt="Fliesen2"/> </div>
</div>
<div id="leftcolumn">
<div class="text" title="text">
<p> RW-Fliesen <br />
Ludwig-Thoma-Str. 36 <br />
82008 Unterhaching
</p>
<div class="text2" title="text">
<p> Telefon: <br />
Fax: <br />
Mobil: <br />
Email: <br />
</p>
</div>
<div class="text3" title="text">
<p> 089 - 358 557 88 <br />
089 - 358 557 89 <br />
0179 - 673 77 41 <br />
info#rw-fliesen.com <br />
</p>
</div>
<div class="text4" title="text">
<p> Betriebsnummer: 7084943 <br /> <span class="text-blue"> Eingetragen in die Handwerksrolle bei <br /> der Handwerkskammer für München <br /> und Oberbayern. </span> </p>
</div>
</div>
<div class="face" title="face">
<iframe id="f580fdad4" name="f83387924" scrolling="no" style="border: none; overflow: hidden; height: 690px; width: 262px;" class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?api_key=&locale=de_DE&sdk=joey&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D18%23cb%3Dfe1e61258%26origin%3Dhttp%253A%252F%252Fwww.rw-fliesen.com%252Ff21318bbdc%26domain%3Dwww.rw-fliesen.com%26relation%3Dparent.parent&height=290&header=true&show_faces=true&stream=false&width=262&href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FRW-Fliesen%2F115860578491339&colorscheme=light"></iframe>
</div>
</div>
<div id="rightcolumn">
<div class="text5" title="text">
<p> Wir sind Ihr fachlich kompetenter Fliesenleger- und Innenausbaubetrieb in Unterhaching. </p>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body { background: #1c1b17 url(bg.jpg) repeat-x; margin: 0; padding: 0; height: 1000px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px;}
p { color: #17142B; line-height: 18px; padding: 0; font-size: 13px; font- weight: 600; }
h3 { color: #003d7a; font-size: 10px; font-weight: 600; margin-top: 0px; padding: 0px; }
h4 { color: #2f303f; font-size: 13px; font-weight: 600; margin-top: 20px; padding: 0px; }
.text-blue { color: #003d7a; line-height: 16px; padding: 0; font-size: 10px; font-weight: 600; }
#wrapper { width: 1000px; height: 800px; margin: 0 auto; }
#header { height: 400px; width: 1000px; display: block; position: relative; }
#header .logo { position: absolute; width: 374px; height: 221px; display: block; float: left; cursor: pointer; background: url(logo.png) 0 0 no-repeat transparent; top: 55px; left: 10px; }
#header .contact-info { position: absolute; width: 293px; height: 133px; display: block; float: left; cursor: pointer; background: url(contact-info.png) 0 0 no-repeat transparent; top: 100px; left: 700px; }
ul.mn { position: absolute; float: left; top: 316px; width: 978px; margin: 0; padding: 0; list-style-type: none; }
ul.mn li { float: left; }
ul.mn li a { display: block; float: left; height: 73px; }
ul.mn li a.mn1 { width: 104px; background-image: url('mn1.png'); background-position: 0 0; }
ul.mn li a.mn2 { width: 212px; background-image: url('mn2.png'); }
ul.mn li a.mn3 { width: 142px; background-image: url('mn3.png'); }
ul.mn li a.mn4 { width: 128px; background-image: url('mn4.png'); }
ul.mn li a.mn5 { width: 117px; background-image: url('mn5.png'); }
ul.mn li a.mn6 { width: 147px; background-image: url('mn6.png'); }
ul.mn li a.active, ul.mn li a:hover { background-position: 0 73px; }
#content { height: 1000px; width: 1000px; display: block; position: relative; }
#top { height: 300px; width: 1000px; display: block; position: relative; margin-bottom: 100px; }
#top .foto1 { width: 452px; height: 139px; float: left; margin-top: 30px; }
#top .foto2 { width: 253px; height: 138px; float: left; margin-top: 30px; margin-left: 100px; }
#leftcolumn { height: 800px; width: 300px; display: block; position: relative; float: left; }
#leftcolumn .text { height: 10px; width: 300px; display: block; position: relative; margin-bottom: 90px; }
#leftcolumn .text2 { height: 10px; width: 50px; display: inline-block; position: relative; }
#leftcolumn .text3 { height: 10px; width: 200px; display: inline-block; position: relative; padding-left: 30px; }
#leftcolumn .text4 { height: 10px; width: 300px; display: inline-block; position: relative; margin-top: 80px; }
#leftcolumn .face { height: 100px; width: 300px; display: block; position: relative; margin-top: 290px; }
#rightcolumn { height: 800px; width: 700px; display: inline-block; position: absolute; margin-left: 350px; margin-top: 0px; float: right; }
#rightcolumn .text5 { height: 300px; width: 700px; display: inline-block; position: relative; }
#footer
You have an iframe with Facebook information in your page. This iframe extends to the bottom of the page and is causing the black background to be visible.
You need to lower the height of this iframe. Currently it's set like this (inline):
<iframe id="f580fdad4" name="f83387924" scrolling="no" style="border: none; overflow: hidden; height: 690px; width: 262px;" class="fb_ltr" src="..."></iframe>
If you change the height to maximum 684px the black bar dissapears:
<iframe id="f580fdad4" name="f83387924" scrolling="no" style="border: none; overflow: hidden; height: 684px; width: 262px;" class="fb_ltr" src="..."></iframe>
I also noticed that your menu bar was not lining up within your header, I do not have 10 reputation points yet so I cannot share the image file of how your page look in my browser Chrome Version: 26.0.1410.63. If you would like that image please feel free to email me and I will send to you.
Making the assumption that you were trying to mimic the mock-up site that you referenced in your initial post. I believe you should make the following adjustments to section of your css code that addresses your menu bar. What you provided:
ul.mn { position: absolute; float: left; top: 316px; width: 978px; margin: 0; padding:0; list-style-type: none; }
What I am proposing:
ul.mn { position: absolute; float: left; top: 316px; width: 850px; margin: 0 auto 0 10px; padding:0; list-style-type: none;}
Notice that I changed the width to reflect the width as dictated by the combined widths of each of your defined button divs to 850px from 978px, then I proposed that instead of setting all of the margins to 0 that you make the top 0, the right auto, bottom 0, and the left 10px (because from what I perceive from your mock-up the left side of the menu is to line up with the left side of the logo). Making those changes I was able to get your menu bar to sit nicely at the base of your header div.
Please keep, at least me, informed on your progress. I am always looking to share ideas and learn how other approach problems. I believe it makes us all that much more intelligent.
Best of luck,
Steve
I'm trying to make this template, which I'm going to later be converting into a WordPress theme. The problem I'm having is similar to this post: Make div stay at bottom of page's content all the time even when there are scrollbars But when I tried the solutions off of that post, but didn't work for me.
What I want to have is the footer be at the very bottom of the page (hidden from view if the content is longer than the viewer's browser window) and not have it fixed on the bottom of the window.
All of the top content (the navigation, bars, logo, etc.) is positioned where I would like it to be. But the link above the footer and the footer aren't positioned at the very bottom of the page. Instead, when it first loads up, it positions itself at the bottom of the page. The more content it has, it stays in the area where it first loaded. See the screenshot below:
Here is the following HTML/CSS for the page:
HTML
<div id="blackbar"></div>
<div id="wrapper">
<div id="redbar">
<img src="images/logo_broeren_03.png" alt="" title="" />
</div>
<div id="navigationWrapper">
<ul>
<li>Contact Us</li>
<li>Who We Are</li>
<li>Our Portfolio</li>
<li>Home</li>
</ul>
<div id="whitebar">
<img src="images/logo_broeren_04.png" alt="" title="" />
</div>
</div>
<div id="newsbar">
</div>
<div id="contentWrapper">
<div id="secondaryNavigation">
</div>
<div id="slider-headline">
</div>
<div id="content">
<div class="post">
<p>Contains post content</p>
</div>
</div>
</div>
</div>
<div id="footer">
<span id="studioLink">designed by Two Eleven Studios</span>
<ul>
<li>602 N. Country Fair Drive, P.O. Box 6537 • Champaign, Illinois 61826–6537</li>
<li>217–352–4232</li>
<li>example#broerenrusso.com</li>
<li>© 2012 Broeren Russo Inc.</li>
</ul>
</div>
CSS
/*General Implementations*/
body {
background: #6CF;
width: 100%;
}
/*Main Elements*/
/*Black bar on the far left side*/
#blackbar {
background: #000;
height: 55px;
position: absolute;
top: 25px;
/*width: 155px;*/
width: 15%;
}
/*Red bar containing red part image of logo*/
#redbar {
background: #C0272D;
width: 114px;
height: 80px;
float: left;
}
#redbar img {
float: right;
position: relative;
top: 24px;
}
/*Wrapper containing main content, navigation, white bar w/ logo, news feed, and main content*/
#wrapper {
width: 798px;
height: 100%;
float: left;
position: absolute;
left: 15%;
/*left: 155px;*/
}
/*Navigation wrapper containing white bar w/ logo and main navigation*/
#navigationWrapper {
width: 570px;
height: 130px;
position: relative;
top: 0;
float: left;
font-size: 12px;
font-family: 'RobotoLight', Arial, sans-serif;
text-transform: uppercase;
}
/*Main navigation settings*/
#navigationWrapper ul {
/*position: relative;
top: 0;
float: right;*/
height: 24px;
width: 570px;
}
#navigationWrapper ul li {
display: inline-block;
width: 114px;
/*height: 22px;*/
text-align: right;
float: right;
padding: 3px 0 0 0;
}
#navigationWrapper ul li:hover {
border-top: 2px #C0272D solid;
padding: 1px 0 0 0;
}
#navigationWrapper ul li a {
position: relative;
top: 10px;
color: #000;
text-decoration: none;
}
/*White bar w/ white logo*/
#whitebar {
background: #FFF;
height: 56px;
width: 570px;
position: relative;
top: 0px;
}
#whitebar img {
float: left;
position: absolute;
}
/*News feed on the side*/
#newsbar {
width: 114px;
height: 179px;
background: #FFF;
margin: 80px 0 0 0;
}
/*Slider/Headline Block and content block*/
#slider-headline, #content {
width: 684px;
}
/*Slider/Headline Block*/
#slider-headline {
background: #000;
height: 302px;
}
/*content block*/
#content {
background: #FFF;
padding: 6.5em 0 1em 0;
margin: 0 0 1.5em 0;
}
/*wrapper containing slider/headline block and content block*/
#contentWrapper {
width: 684px;
margin: -179px 0 24px 114px;
}
/*Company tagline (only on index page)*/
#companyTagline {
float: right;
font-family: 'RobotoMedium', Arial, sans-serif;
margin: 5px 0 0 0;
}
/*Secondary navigation within contentWrapper*/
#secondaryNavigation {
width: 611px;
height: 110px;
margin: 0 auto;
position: absolute;
background: #666;
z-index: 10;
top: 320px;
right: 44px;
}
/*Post settings*/
.post {
width: 89%;
margin: 0 auto;
}
/*Studio link*/
#studioLink {
position: absolute;
bottom: 27px;
left: 3px;
font: 8px 'RobotoLight', Arial, sans-serif;
}
/*Main footer*/
#footer {
position: absolute;
bottom: 0;
width: 100%;
background: #CCC;
height: 24px;
}
#footer ul {
width: 684px;
margin: 0 auto;
}
#footer ul li {
list-style-image: none;
display: inline-block;
font: 9px/11px 'RobotoLight', Arial, sans-serif;
margin: 0 23px 0 0;
}
#footer ul li:last { margin: 0; }
I know part of the problem is all of the top content (navigation, white bar on top, etc.) have the position: absolute; CSS within them. But I wanted to keep this CSS declaration. How do I have it so the link above the footer and the footer itself positioned at the bottom of the page/content and not positioned at the bottom of the window?
So here it is. It took a long time because of absolute positioning
<body>
<div style="width:100%; min-height: 100%; position: relative; display:inline-block;">
<div id="blackbar">
</div>
<div id="wrapper">
<div id="redbar">
<img src="images/logo_broeren_03.png" alt="" title="" />
</div>
<div id="navigationWrapper">
<ul>
<li>Contact Us</li>
<li>Who We Are</li>
<li>Our Portfolio</li>
<li>Home</li>
</ul>
<div id="whitebar">
<img src="images/logo_broeren_04.png" alt="" title="" />
</div>
</div>
<div id="newsbar">
</div>
<div id="contentWrapper">
<div id="secondaryNavigation">
</div>
<div id="slider-headline">
</div>
<div id="content">
<div class="post">
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
</div>
</div>
</div>
</div>
<div id="footer">
<span id="studioLink">designed by Two Eleven Studios</span>
<ul>
<li>602 N. Country Fair Drive, P.O. Box 6537 Champaign, Illinois 618266537</li>
<li>2173524232</li>
<li>example#broerenrusso.com</li>
<li> 2012 Broeren Russo Inc.</li>
</ul>
</div>
</div>
</body>
css
<style type="text/css">
/*General Implementations*/
html, body
{
background: #6CF;
width: 100%;
height: 100%;
}
/*Main Elements*/
/*Black bar on the far left side*/
#blackbar
{
background: #000;
height: 55px;
position: absolute;
top: 25px; /*width: 155px;*/
width: 15%;
}
/*Red bar containing red part image of logo*/
#redbar
{
background: #C0272D;
width: 114px;
height: 80px;
float: left;
}
#redbar img
{
float: right;
position: relative;
top: 24px;
}
/*Wrapper containing main content, navigation, white bar w/ logo, news feed, and main content*/
#wrapper
{
width: 798px;
min-height: 100%;
float: left;
position: relative;
left: 15%; /*left: 155px;*/
}
/*Navigation wrapper containing white bar w/ logo and main navigation*/
#navigationWrapper
{
width: 570px;
height: 130px;
position: relative;
top: 0;
float: left;
font-size: 12px;
font-family: 'RobotoLight' , Arial, sans-serif;
text-transform: uppercase;
}
/*Main navigation settings*/
#navigationWrapper ul
{
/*position: relative;
top: 0;
float: right;*/
height: 24px;
width: 570px;
}
#navigationWrapper ul li
{
display: inline-block;
width: 114px; /*height: 22px;*/
text-align: right;
float: right;
padding: 3px 0 0 0;
}
#navigationWrapper ul li:hover
{
border-top: 2px #C0272D solid;
padding: 1px 0 0 0;
}
#navigationWrapper ul li a
{
position: relative;
top: 10px;
color: #000;
text-decoration: none;
}
/*White bar w/ white logo*/
#whitebar
{
background: #FFF;
height: 56px;
width: 570px;
position: relative;
top: 0px;
}
#whitebar img
{
float: left;
position: absolute;
}
/*News feed on the side*/
#newsbar
{
width: 114px;
height: 179px;
background: #FFF;
margin: 80px 0 0 0;
}
/*Slider/Headline Block and content block*/
#slider-headline, #content
{
width: 684px;
}
/*Slider/Headline Block*/
#slider-headline
{
background: #000;
height: 302px;
}
/*content block*/
#content
{
background: #FFF;
padding: 6.5em 0 1em 0;
margin: 0 0 1.5em 0;
}
/*wrapper containing slider/headline block and content block*/
#contentWrapper
{
width: 684px;
margin: -179px 0 24px 114px;
}
/*Company tagline (only on index page)*/
#companyTagline
{
float: right;
font-family: 'RobotoMedium' , Arial, sans-serif;
margin: 5px 0 0 0;
}
/*Secondary navigation within contentWrapper*/
#secondaryNavigation
{
width: 611px;
height: 110px;
margin: 0 auto;
position: absolute;
background: #666;
z-index: 10;
top: 320px;
right: 44px;
}
/*Post settings*/
.post
{
width: 89%;
margin: 0 auto;
}
/*Studio link*/
#studioLink
{
position: absolute;
bottom: 27px;
left: 3px;
font: 8px 'RobotoLight' , Arial, sans-serif;
}
/*Main footer*/
#footer
{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
background: #CCC;
height: 24px;
}
#footer ul
{
width: 684px;
margin: 0 auto;
}
#footer ul li
{
list-style-image: none;
display: inline-block;
font: 9px/11px 'RobotoLight' , Arial, sans-serif;
margin: 0 23px 0 0;
}
#footer ul li:last
{
margin: 0;
}
</style>
Here is the fiddle. Working perfect for me. Checked in Chrome and Firefox.
Try this formula. in hurry
<div class="header">
</div>
<div id="Content">
<div class="con"></div>
</div>
<div class="header">
</div>
css
html, body
{
height: 99%;
background-color:Black;
}
.header ,.footer
{
width: 960px;
height: 15%;
background-color:Gray;
}
#Content
{
min-height: 85%;
width: 960px;
background-color:Navy;
}
.con
{
min-height:900px;
width:960px;
background-color:Aqua;
}
fiddle here
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
HTML
<div class="wrapper">
<p>http://ryanfait.com/resources/footer-stick-to-bottom-of-page/</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright © 2008</p>
</div>
CSS
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /*!*/
}
.footer, .push {
height: 4em; /*!*/
clear: both;
}
Set the body to height: 100%; and overflow: auto;
Set the footer to position: fixed;, bottom: 0; and left: 0;
Then you must only set the margin-bottom of your content to the height of your footer.
Change the position of the footer from absolute to fixed:
#footer {
position: fixed;
...
}