I'm building the framework for a responsive site that has a fixed header and 25px padding on both right & left sides of the page. I'm not encountering any issue with the padding or width on the content, but the fixed header runs off the right side of the browser when the display is too small. I'd like the header to obey the same rules and design as the rest of the page, and always show a 25px padding unless the display is narrower than my min-width.
Any help would be appreciated. This seems rather simple, but I'm pulling my hair out.
CSS:
#main {
padding: 0 0px 0 25px;
min-width: 725px;
max-width: 1000px;
margin: 0 auto;
}
#page {
padding: 0 25px 0 25px;
display: block;
margin: 0 auto;
max-width: 1000px;
min-width: 725px;
position: relative;
}
ul#header-nav {
margin: 33px 0px 0 0px;
list-style:none;
width:500px;
font-family: "ss-bol", Helvetica, Arial, sans-serif;
overflow: hidden;
}
ul#header-nav li a {
text-decoration:none;
padding-left: 30px;
color:#000000;
float:left;
text-align: right;
display:inline;
}
#container {
padding-top: 100px;
left: 0;
height: 100%;
}
#header-main {
width: 100%;
margin: 0 -25px 0 0px;
}
#header-frame {
z-index: 10;
background-color: #c9dcb1;
float: right;
}
#header-box {
width: 100%;
max-width: 1000px;
min-width: 725px;
padding-left: -25px;
height: 100px;
background-color: #ffffff;
margin:0px;
position: fixed;
background-color: #c9dcb1;
z-index: 11;
}
#content {
padding-top: 100px;
width: 100%;
background-color: #75efe8;
}
HTML:
<body>
<!-- BeginHeader -->
<div id="page" class="clearfix heed">
<div id="header-main">
<div id="header-box">
<div id="header-frame">
<ul id="header-nav">
<li>NEW</li>
<li>SHOP</li>
<li>WINE</li>
<li>BLOG</li>
<li>LOOKBOOK</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
<div id="content">
TEST CONTENT TEXT
</div>
</div>
</body>
padding, margin and border are added to the with of an element. So, when your display is to small, by telling max-width: 1000px, you imply 1050px because of the padding.
The easy solution is to replace width: 100% by this left and right set as 0, and center your inner content.
<div id="header-box">
<div class="inner">header</div>
</div>
#header-box {
max-width: 1000px;
min-width: 725px;
position: fixed;
left: 0;
right: 0;
top: 0;
}
#header-box .inner {
max-width: 1000px;
margin: 0 auto;
}
Simon, I took the basics of your approach and expanded upon it to get what I needed.
Here's the final CSS:
#header-wrapper {
padding: 0;
margin: 0;
}
#header {
position: fixed;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 9;
background-color: #ffffff;
}
#header .inner {
margin: 0 auto;
padding: 0 25px 0 25px;
max-width: 1000px;
height: 100px;
z-index: 10;
background-color: #ffffff;
}
ul#header-nav {
margin: 58px -20px 0 0px;
list-style: none;
width: 500px;
font-family: "ss-bol", Helvetica, Arial, sans-serif;
font-size: 14px;
overflow: hidden;
}
ul#header-nav li a {
text-decoration: none;
padding-left: 30px;
color: #000000;
float: left;
text-align: right;
display: inline;
}
And the HTML:
<div id="header-wrapper">
<div id="header">
<div class="inner">
<div class="right">
<ul id="header-nav">
<li>NEW</li>
<li>SHOP</li>
<li>WINE</li>
<li>BLOG</li>
<li>LOOKBOOK</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
Thanks again!
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 2 years ago.
Trying to make the footer in my html css website stick down but nothing works. I've tried changing the position to absolute and fixed and setting bottom: 0 and doing everything but nothing works. Also, is there a better way to make my logo aligned in the middle? Heres my css:
.footer{
background-color: #d62929;
clear: both;
width: 100%vw;
display:block;
overflow: hidden;
padding-top:10px;
padding-bottom: 10px;
min-height: 100%vw;
}
.contact{
margin-left: 30px;
margin: 0 auto;
display:block;
float: left;
padding-right: 50px;
}
.info{
margin-left: 30px;
margin: 0 auto;
padding-left: 30px;
display:block;
float: left;
padding-right: 50px;
}
.account{
margin-left: 30px;
margin: 0 auto;
padding-left: 30px;
display:block;
float: left;
padding-right: 50px;
}
a{
text-decoration:none;
color: black;
font-family: times new roman;
font-size: 18px;
text-align: center;
}
ul{
list-style: none;
text-align: left;
}
.logo_footer{
float: left;
padding: 40px 0;
margin-left: 20px;
margin-right: 40px;
}
h1{
color: white;
font-size: 24;
}
li{
padding: 5px;
}
Heres my html for the footer:
<div>
<footer class="footer">
<img src="{{url_for('static', filename='Logo.png')}}" style="height:108px;width:100px;" class="logo_footer" alt="logo"></a>
<div class="contact">
<h1>Contact us</h1>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Telegram</li>
</ul>
</div>
<div class="info">
<h1>Information</h1>
<ul>
<li>About Us</li>
<li> Contact Us</li>
<li>Return Policy</li>
<li>Delivery</li>
</ul>
</div>
<div class="account">
<h1>Account</h1>
<ul>
<li>Log in</li>
<li> Register</li>
<li> My cart</li>
</ul>
</div>
</footer>
</div>
You can make position:fixed; instead of position:absolute; This will make it fixed to the bottom. if there are any other div or something that's causing an overlay issue, use z-index:5;
I used postion:relative on wrapper div and postion: sticky on footer.
.sectionWrapper {
position: relative;
}
.header {
height: 10vh;
width: 100%;
background: red;
}
.body {
height: 100vh;
width: 100%;
background: blue;
border: 1px solid black;
}
.footer {
height: 20vh;
width: 100%;
background-color: green;
position: sticky;
bottom: 0%;
}
<div class="sectionWrapper">
<section class="header">Header</section>
<section class="body">Body 1</section>
<section class="body">Body 2</section>
<section class="body">Body 3</section>
<section class="footer">footer</section>
</div>
There are multiple ways for that.
Min-height:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
position: relative;
min-height: 100%;
Margin-top, here you do need to specify footer height:
* {
margin: 0;
padding: 0;
}
html,
body,
.footer {
height: 100%;
}
.footer__content {
box-sizing: border-box;
This the best, because the height of the footer doesn't matter:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
display: table;
height: 100%;
This way is a bit different from others because it uses CSS calc() function, and you need to know exact footer height:
* {
margin: 0;
padding: 0;
}
.footer__content {
min-height: calc(100vh - 80px);
}
This is the most correct way, however it works only in modern browsers, as in the 3rd example, the height doesn't matter:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
display: flex;
flex-direction: column;
In my project, I am using this to solve same task, it's the easiest solution that I found in Internet:
body {
position: relative;
min-height: 100vh;
}
.footer {
position: absolute;
bottom: 0px;
}
Here is important to use min-height property in body and not the height one, because actual height of your page can be more that user's screen size.
This solution makes your footer to snap not to screen bottom, but to page bottom.
Hi my question is can somebody help me to become the scrollbar of my content over the footer.
How it looks on the browser
And here code snippets
HTML:
<body>
<div class="major">
<div class="torso">
<div id="gallery">
</div>
<div class="bone">
<div class="aero">
Menu
</div>
<div class="magneticaero">
<a href="index.html" class="geo">
<div class="chest">
<div class="flaticon-house158">
</div>
</div>
</a>
</div>
</div>
</div>
</body>
CSS:
html,head,body,p,div,a,ul,h2{
margin: 0;
padding: 0;
font-family: sans-serif,Century Gothic,CenturyGothic,AppleGothic;
text-decoration: none;}
.major{
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: fixed;}
.torso{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-y: scroll;}
.bone{
width: 100%;
height: 70px;
margin: 0;
padding: 0;
bottom: 0;
position: fixed;
background-color: #C2C2C2;
text-align: center;
transition: 1s;}
.aero{
width: 100%;
height: 40px;
box-shadow: 0 0 1px #FFF;
padding-top: 15px;
padding-bottom: 15px;
font-size: 30px;
font-weight: bold;
color: #FFF;}
.magneticareo{
width: 100%;
height: 360px;}
.chest{
width: 25%;
height: 350px;
box-shadow: 0 0 1px #FFF;
float: left;
font-size: 25px;
font-weight: bold;
color: #FFF;}
.boneup{
height: 350px;}
.photo{
width: 100%;
height: auto;
padding: 0;
margin: 0;}
.order{
width: 20%;
height: auto;
padding: 0;
margin: 0;
float: left;}
The solution i search
I'd be really thankful when somebody could help me :-)
Tim
Take .aero OUT of all the other elements, move it down directly above </body>, and give it a fixed position with bottom: 0
I addition, set the height of .major to calc(100% - 40px) , i.e. as high as the window minus the height of .aero. (And use box-sizing: border-box on it to really only make it 40px high.)
ADDITION after seeing website: Assign height: calc(100% - 70px); to .torso-gallery - this has the same effect I described above and you won't need to change your HTML structure anymore.
the html menu that i have inserted into the page through SSI is stretching to the left beyond the hard coded width of the page and i can't figure out why...
if you look at my code, the #menu id is the problem as it is floating properly (float:right;) but the width it seem is being overridden by something....and i can't find out what is overriding it.....i've checked all the properties that would affect #menu but nothing has an effect on it...
here is the webpage where it is clear: http://unifiedforunifat.com/redesign/homepage.html
here is the css for the homepage where the menu is insert:
body{
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin: 0;
padding: 0;
padding-top: 10px;
}
html{
height: 100%;
}
#wrapper{
width: 900px;
min-height: 100%;
height: auto;
margin: 0 auto -4em;
}
#header{
position: relative;
top: 0;
left: 0;
margin-bottom: 1px;
}
here is the corresponding html:
<body>
<div id="wrapper">
<div id="header">
<!--#include virtual="/menus/menu.html" -->
</div>
here is the css for the menu page:
#menu-wrapper{
position: relative;
width: 900px;
margin: 0 auto;
height: 140px;
}
#logo{
background:url('http://www.unifiedforuganda.com/resources/u4ulogo.jpg') no-repeat;
height: 108px;
width: 200px;
position: relative;
top: 3px;
background-position: 0 0;
float: left;
}
#logo span{
position: absolute;
top:0; left:0; bottom:0; right:0;
background:url('file:///Volumes/Despotos/Users/nojohnny101/Documents/Dropbox/Unified%20for%20UNIFAT/website/resources/u4ulogo.jpg') no-repeat;
background-position: -200px 0;
}
#logo:hover span{
opacity: 1;
}
.social{
position: relative;
margin: 50px 0 0 0;
width: 136px;
float: right;
overflow: hidden;
display: block;
}
#menu{
position: relative;
top: 0;
right: 0;
list-style: none;
display: block;
overflow: hidden;
width: 100%;
margin-top: 0;
padding-top: 4px;
border-top: 1px solid black;
float: right;
}
then here is the html for the menu page:
<div id="menu-wrapper">
<div class="menu-header">
<span></span>
</div>
<div class="social">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<ul id="menu">
<li class="active">DONATE</li>
<li class="active">ABOUT US</li>
<li class="active">MEDIA</li>
<li class="active">US MOVEMENT</li>
<li class="active">UGANDA PROGRAMS</li>
</ul>
</div>
any help would be truly appreciated!
so i found the answer...what i ended up doing was put the overflow: hidden; property on the #menu-wrapper id....i don't know if i totally understand why this helped to hide the extra width to the left of the page even though a hard width was specified (900px) and the border is actually applied to the #menu id not the #menu-wrapper id.....
but problem....thanks #MrLister
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;
...
}
I´m trying to make a footer that sticks to the bottom of wrapper, but leaving a bottom margin so that the pattern image on the body background can be seen.
I came accross the sticky footer at
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
which worked great, but all my attempts of adding margin/paddings to footer/ wrapper/ body didn´t.
I guess it must be a pretty simple thing, but I´m not finding it. Thanks for any hints/ suggestions!
Here´s the relevant CSS:
*
{
margin: 0;
}
html, body
{
margin-top: 0px;
margin-bottom: 25px;
background-repeat: repeat;
background-image: url(images/modulo-pattern-grey-light.gif);
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -98px;
background: #fff url(images/footer.gif) left bottom no-repeat;
width: 980px;
box-shadow: 4px 4px 5px #999;
}
.footer, .push
{
height: 98px;
}
.footer
{
margin-left: 490px;
margin-right: 40px;
background-color: #bc4c9b;
}
HTML:
<div id="wraper">
<div class="header"></div>
<div class="logo">
</div>
<div class="menu_container">
<div class="main_menu">
<ul>
<li>Home</li>
<li><a class="selected" >Quiénes Somos</a></li>
<li>Consultoría</li>
<li>Capacitación</li>
<li>Académico / Artículos</li>
<li>Alianzas</li>
<li>Proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div class="quienes_pic"></div>
<div class="quienes_text"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
Sorry I didn´t mention, but Fixed position won´t work, since I want the same footer to work on different pages with differents heighs. The idea was to have the same wraper and footer through all the pages, and then assigning different body ids to set the different heighs
Pretty much like is done through this site:
http://www.casadelviento.com.ar/
In this case, it´s using different body ids AND different wrappers, I thought may be it could be done with less code and more clear (i.e I don´t understand why is the difference between the wraper heigh #contenido-index and the body heigh)
#contenido-index {
background-color: #FFF;
height: 2040px;
width: 900px;
margin: 0 auto;
}
#contenido-chicos {
background-color: #FFF;
height: 2760px;
width: 900px;
margin: 0 auto;
}
#contenido-adultos {
background-color: #FFF;
height: 2810px;
width: 900px;
margin: 0 auto;
}
#contenido-somos {
background-color: #FFF;
height: 2150px;
width: 900px;
margin: 0 auto;
}
#contenido-historia {
background-color: #FFF;
height: 980px;
width: 900px;
margin: 0 auto;
}
#contenido-horarios {
background-color: #FFF;
height: 967px;
width: 900px;
margin: 0 auto;
}
#contenido-contacto {
background-color: #FFF;
height: 750px;
width: 900px;
margin: 0 auto;
}
#contenido-videos {
background-color: #FFF;
height: 820px;
width: 900px;
margin: 0 auto;
}
#contenido-fotos {
background-color: #FFF;
height: 595px;
width: 900px;
margin: 0 auto;
}
#body-index {
height: 2160px;
}
#body-somos {
height: 2070px;
}
#body-historia {
height: 1150px;
}
#body-horarios {
height: 1060px;
}
#body-chicos {
height: 2700px;
}
#body-adultos {
height: 2800px;
}
#body-videos {
height: 960px;
}
#body-fotos {
height: 740px;
}
#body-contacto {
height: 880px;
}
/*FOOTER}*/
#contenedor_pie {
height: 40px;
width: 500px;
float: left;
margin-left: 20px;
margin-top: 15px;
}
With Reference to http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml
You can define your footer HTML as
<div id="Sticky">
<h2>Here is a Sticky Footer</h2>
<p>Test for Sticky Footer</p>
</div>
then your CSS would be like
#Sticky
{
color:#FFF;
text-shadow: 2px 2px 2px #333;
border: 2px solid orange;
position:fixed;
padding: 0 10px 0 10px;
left: 0px;
bottom: 0px;
width: 100%;
}
Hey you can do easily just define in your css some code as like this
Css
body{background:green;}
#wrapper {
background:red;
min-height:700px;
}
.footer {
position:fixed;
bottom:20px;
height:100px;
background:yellow;
left:0;
right:0;
}
HTML
<div id="wrapper">Wraper text </div>
<div class="footer">Sticky footer</div>
Live demo http://jsfiddle.net/6z6Uk/
and now adjust according to your design .