I know that there are tons of questions about this but I've been searching Google for 4 days now and nothing is seeming to work for me. I'm trying to implement a sticky footer - meaning that when there is not enough content to fill the screen, the footer is at the bottom of the screen and when there is enough content to fill the screen, the footer stays below that content and you scroll down.
I have tryed roughly 15 different sticky footer solutions and while most of them work in theory, my particular situation keeps messing it up my content has borders on the left and right that should extend down to the footer. Anything involving push won't work.
Here is the most recent incarnation of what I've tried:
HTML
<div id="container">
<div id="header">
<!--Banner goes here-->
<div id="nav">Navigation Links</div>
</div>
<div id="content">
<p>Content Goes Here</p>
</div>
<div id="footer">
</div>
</div>
CSS
html, body {
padding: 0;
margin: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#content {
padding: 20px;
border-left: solid 30px lightblue;
border-right: solid 30px lightblue;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
border-top: solid;
text-align: center;
padding-top: 10px;
}
How do I get this sticky footer to work while also getting those blue borders to extend down to the footer?
Here's a solution that uses box-shadow to create the "border:" http://jsfiddle.net/FT8KR/. The pixel values were rather arbitrary, so play with those. Border can also be used, but it pushes the scroll bar more inwards, whereas box-shadow naturally does not.
#container {
height: 100%;
margin: 0 auto -80px;
overflow: auto;
padding-bottom: 80px;
padding: 0 30px;
box-shadow: inset -48px 0 0 lightblue,
inset 30px 0 0 lightblue;
}
body{
padding-bottom: 90px
}
#footer {
position: absolute;
bottom: 0;
left: 0;
right:0 ;
height: 80px;
border-top: solid;
text-align: center;
padding-top: 10px;
}
Related
I have about the same structure. The width of the central content part is 1080px. .corner is an angle with absolute positioning that cuts off the right side of the header.
The problem is that when the screen narrows, this angle goes to the content part. I will hide it from mobile devices altogether, but on other resolutions I would like it to just go off the screen when it rests on the left side of the content part.
<div class="header">
<div class="corner"></div>
<div class="header-content">
Some kind of header content
</div>
</div>
<div class="main">
<div class="content">
Some kind of main content
</div>
</div>
My CSS
.header {
max-width: 1080px;
margin: 0 auto;
padding: 10px;
background-color: #FAAC38;
}
.corner {
width: 253px;
position: absolute;
right: 0;
border: 0 solid #f8f9fa;
border-bottom-width: 168px;
border-top-width: 0px;
border-left: 168px solid #FAAC38;
}
.main {
max-width: 1080px;
margin: 5px auto;
padding: 60px;
background-color: #fff;
border: 1px solid #e9ecef;
}
I made a gif
I have a small issue with a website I'm creating.
The page has a background and a white body in the center, in the white body there is padding for the text so it doesn't start at the border.
#content
{ width: 900px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 20px 30px 20px 31px;
background: #FFFFFF;
text-align: left;}
So the problem is I have a jquery gallery in the top of the content body, but I don't want the gallery to have the padding around it, I mean, the white body. I want the gallery to start at the border of the body and end at the other end.
So I figured I have to make a new CSS tag without padding or negative padding but that isn't working.
How can I fix this?
You can use negative margins that match the padding amount to make the gallery flush with the edges.
body {
background: #eee;
}
#content {
width: 900px;
overflow: hidden;
margin: auto;
padding: 20px 30px 20px 31px;
background: #FFFFFF;
text-align: left;
}
.flush {
background: #171717;
color: #fff;
margin: 0 -30px 0 -31px;
}
<div id="content">
<div>normal</div>
<div class="flush">flush</div>
</div>
I need to extend the content box (white area) closer to the bottom of the page.
When ever I use the height or padding property, it makes it taller from the top.
.Content-Box {
position: relative;
margin: 0 auto;
background-color: white;
top: 65px;
padding: 80px;
height: -40px;
text-align: center;
box-shadow: 0px 3px 5px #888888;
}
<div class="Content-Box">
<hr>
</div>
add
padding-bottom: (amount you want)px;
I've just been introduced to the Zurb Foundation 4 framework via a friend of mine. Interesting stuff. But i'm having a problem I can't seem to understand. I have a site based on 4 rows (header, navbar, content, footer);
<div class="row siteBase">
<div class="row siteHeader" id="siteHeader">
<div class="large-12 c7olumns">
<h2>Welcome to Foundation</h2>
<p>This is version 4.1.2.</p>
</div>
</div>
<div class="row siteNavbar" id="siteNavbar">
navbar
</div>
<div class="row siteBody" id="siteBody">
base
</div>
<div class="row siteFooter" id="siteFooter">
footer
</div>
</div>
here's my CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.siteBack {
background-color: #545454;
}
.siteBase {
/*base size and color*/
width: 1280px;
min-height: 100%;
margin: 0 auto;
background-color: #f2f2f2;
/* exact fit the contents to the border */
padding-left:15px;
padding-right:15px;
/* border size and color */
border-style: solid;
border-left-width: 4px;
border-top-width: 0px;
border-right-width: 4px;
border-bottom-width: 0px;
border-color: #7da500;
/* add some shadows to the borders */
-moz-box-shadow: 0 0 10px 5px #272727;
-webkit-box-shadow: 0 0 10px 5px #272727;
box-shadow: 0 0 10px 5px #272727;
}
.siteHeader
{
width: 100%;
height: 250px;
background-color: #7da500;
}
.siteNavbar
{
height: 50px;
background-color: #1d1d1d;
}
.siteBody
{
min-height: 100% auto;
margin: 0 auto;
background-color: #f2f2f2;
}
.siteFooter
{
height: 50px;
background-color: #7da500;
}
The problem I have is that the sitebody div isn't stretched to to full 100%. The header and navbar is fixed size, as is the footer. But I wan't the sitebody div to take the remaining space so that the footer is always placed in the lower bottom of the screen (at minimum).
What am I missing here? Thanks a lot for your help.
Basically what you need is to stick your footer to the bottom of the page. In that manner you will have a full body even if your main content is small. You can take a look at this SO question to see how it is implemented. There could be a lot going on in there as that layout is a bit complex. So I did a sample for you that you can use for a more simple layout. Here is the modified css from the other SO question.
html, body, #wrapper{ height: 100%; }
body > #wrapper{height: auto; min-height: 100%;}
#main { padding-bottom: 75px; /* same height as the footer */
overflow:hidden;
top: 75px; bottom: 0; left: 0; right: 0;
background-color:yellow;
}
#footer {
position: relative;
margin-top: -75px; /* negative value of footer height */
height: 75px;
clear:both;
}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
I have html like below
<div>
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
.left
{
background: none repeat scroll 0 0 white;
border-right: 1px solid #C3C3C3;
float: left;
margin-top: 30px;
min-height: 100%;
position: absolute;
width: 170px;
}
.center
{
background: none repeat scroll 0 0 white;
float: left;
margin-left: 171px;
margin-top: 30px;
min-height: 100%;
position: absolute;
width:895px;
}
.right
{
background: none repeat scroll 0 0 #DEDFE8;
border-left: 5px solid #BDC1DE;
float: right;
margin-top: 30px;
min-height: 100%;
position: absolute;
width: 276px;
}
when the center panel stretches the right and left panels stay at there height of 100%
Is there a way of stretching the right and left panels when the center panel stretches.
Edit
When the center panel consists of html controls that make the center div expand more than the min-height of 100% the left and right panels do not expand and these panels have different colors and borders and the page doesnt look right as you can see gaps after the when right and left panels do not expand and the center panel does.
Personally I like the equal height columns from www.ejeliot.com
http://jsfiddle.net/spacebeers/s8uLG/3/
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>
Faux Columns is also good and probably easier to set up but if you're really dead against using an image this is a pretty good method.
Based on your edit, you mean you want them to expand vertically. There are a few ways to do this, but my favorite is faux columns.
You basically put a background with your column colors on the whole containing div and it gives the illusion that all three columns are the same height.
You're still going to want to workout your positioning issues. As I mentioned before, position:absolute should be used with either top, left, bottom or right. Or, instead of absolute positioning, you can use floats. You can't use both :)
set the outer div that contains the divs below with width:100%, position:absolute and min-height:100%
then change the css to this
.left
{
background: none repeat scroll 0 0 white;
border-right: 1px solid #C3C3C3;
margin-top: 30px;
min-height: 100%;
position: absolute;
width: 170px;
}
.center
{
background: none repeat scroll 0 0 white;
float: left;
margin-left: 171px;
margin-top: 30px;
width:895px;
}
.right
{
background: none repeat scroll 0 0 #DEDFE8;
border-left: 5px solid #BDC1DE;
margin-top: 30px;
min-height: 100%;
position: absolute;
width: 276px;
}
<div class="width:100%;position:absolute;min-height:100%">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>