I'm recreating my layout with bootstrap because I want my website to be responsive.
I have my layout like this now:
<div id="container">
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</div>
This is the css code for container and the footer:
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#content{
padding: 0 0 4em; /* Footer height padding */
}
div#footer{
bottom: 0;
position:absolute;
z-index:0;
background:#000000;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
But I got a problem (You can see the current code + setup right here):
Once I resize the page like the footer is right under the header (it's on top of the content area text, I need to put the right padding in there). After that click the menu icon (in mobile view) and the footer is on top of the menu, which isn't meant to be so.
Just like this:
What's supposed to happen is that the menu is above the footer.
I tried fixing it with z-index:-20; but then I can't click the links in the footer anymore... So that solution won't work.
Can you help me?
You should add z-index to your nav-bar, like so:
.navbar {
...
z-index: 1;
}
for div#footer footer give z-index=-1 and you will get it like this
To fix this problem :
It's better to Use ( header, content, footer) in separate container.
In line (42) in your style.css file your code should be like this:
UPDATE
the new code and make at least the footer in a separate container.
div#footer {
bottom: 0;
background: #000000;
margin-left: auto;
margin-right: auto;
}
hope this will help you.
Answered by: MichaB
The solution was to add z-index:1; to the navbar. This fixed the problem.
Related
Introduction
There are many good and well tested recipes for a footer that is always as the bottom of a page but is not fixed (or overlap content). Here is one that works for me: http://ryanfait.com/sticky-footer/
In short it works like follows:
HTML:
<html><body>
<div id="wrapper>SOME CONTENT</div><footer></footer>
</body></html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -4em;
}
footer {
height: 4em;
}
The trick is that #wrapper is forced to use 100% of available height, but is margin bottom leaves some space for a footer (negative margin is exactly the size of the footer).
Problem description
While building a Single Page Application, some javascripts frameworks like Ember.js adds additional divs to our document structure (for example to handle events). This creates an addtional wrapper around our original document which may look like this:
<html><body>
<div class="framework-container">
<div id="wrapper>SOME CONTENT</div><footer></footer>
</div>
</body></html>
This additional div breaks our CSS setup. To improve the situation we want to say that framework-container should behave exactly as body, so we may try to add:
.framework-container {
position: relative;
height: 100%;
min-height: 100%;
}
And it almost work: if the content is smaller than the page height. Otherwise there is a noticeable distance between the footer and bottom of the page - which we cannot accept.
Does anyone know a pure CSS solution to this problem?
I'm not sure if you said the wrapper worked or not, but you can tell Ember to insert the application into a particular element, and it won't insert any elements outside(above) that element.
Set the root Element
App = Em.Application.create({
rootElement: '#body'
});
HTML
<div id="container">
<div id="header">I'm a header</div>
<div id="body"></div>
<div id="footer">I'm a footer</div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://emberjs.jsbin.com/OPaguRU/1/edit
I totally jacked some of this from: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I am using the following basic html and css pattern (although my live code looks very different)
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
to get a sticky footer to the bottom of my page.
I have applied two backgrounds to the body tag. One is a repeating wood texture then a shadow that goes on top. Both of these go under the footer.
It almost works, but on long pages (where you have to scroll down to see the footer) when you resize the browser window the shadow (and not the wood) creeps up the page. I have tried moving the shadow to the bottom right position but that doesnt work at all.
Here is a staging of it:
I have repeated the problem in FF and Safari
http://www.dnbsandbox.com/diablo/
Remove this from the first line of the css:
html {
height: 100%;
}
I'm trying to make a simple, fluid, responsive two column layout (just for the sake of learning CSS), consisting of a sidebar and a main section.
I was able to create the sidebar with 100% height, position the main content at its side, but when I put a H1 inside my main section... tada! Its margin created a margin for the sidebar as well.
Here's a minimum code that presents the problem:
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#sidebar {
display:block;
position:absolute;
width:25%;
min-height:100%;
border-right:1px solid #222;
background-color: #E0E0E0;
}
#main {
margin-left:25%;
display:block;
}
h1 {
padding:2%;
/* margin:0; */
/* defining the margin as zero aligns
* everything at the top */
}
</style>
</head>
<body>
<header id="sidebar">
Let's reach for the stars!
</header>
<section id="main">
<h1>Nope!</h1>
</section>
</body>
</html>
I've tested it in Chrome and Firefox, happened in both.
I've created this JSFiddle, and thanks to a comment from cimmanon, the behavior is the same.
Well, I'm lost. Am I missing something really simple?
Is this approach a good way to make a two column layout? I inspired myself reading the CSS from the Svbtle blogs.
Generally speaking, absolute positioning should be avoided unless you really do want the element removed from the document's flow. If you have a page where #main ends up having shorter content than #sidebar and the user's display isn't tall enough to display all of #sidebar's contents, you're going to have your content clipped off.
My favored way of achieving equal height columns is to use the display: table CSS properties.
http://jsfiddle.net/PmkCQ/3/
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
body { display: table }
#sidebar {
width:25%;
border-right:1px solid #222;
background-color: #E0E0E0;
}
#sidebar, #main {
display:table-cell;
vertical-align: top; /* optional */
}
h1 {
padding:2%;
margin-top: 0;
/* margin:0; */
/* defining the margin as zero aligns
* everything at the top */
}
There's other ways, of course, but this one is less brittle than floats or absolute positioning. The only down side is that IE7 doesn't support these properties, so they'll continue using the element's previously defined (or default) display setting (for div, it will be block).
Add display: inline-block to the h1 and it won't influence the side bar. Then you can set any margin you want.
The reason it seemed fine in JSFiddle is probably the styles applied from their styles (inspect the h1 and you'll see it has margin:0).
I use the below piece of code to align a div at the browser bottom
CSS:
/* using the child selector to hide the
following body css from IE6 and earlier */
html>body {
background-color: yellow;
}
#footer {
position:absolute;
right:0;
bottom:0;
background-color:Yellow;
}
HTML:
<div id="footer">
CCC
</div>
This works well when the page fits the page:
But when the page length exceeds then if I scroll the page the div also getting scrolled top:
I have placed the footer div at the top top user control. There are some other controls after the footer div. Will that cause the issue?
#footer {
position: fixed;
right:0;
bottom:0;
background-color:Yellow;
}
absolute is absolute relative to html body, and fixed is with respect to the frame
Difference and other values for position tag are here.
Use the sticky footer CSS: http://www.cssstickyfooter.com/
You should use fixed position instead of absolute.
Use this code:
/* using the child selector to hide the
following body css from IE6 and earlier */
html>body {
background-color: yellow;
}
#footer {
position:fixed;
right:0;
bottom:0;
background-color:Yellow;
}
Are you maybe looking for this http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page ?
I have 2 DIVs, one containing a map, this one is above the other one. It should take all space available, except for the footer, which is 25px high.
Currently I give the map 95% of the height, and the footer 25px. Problem is when the windows gets really big, the footer becomes enormousness, and when the windows becomes really small, scroll bars kick in.
However, this is not what I want, I want:
#map { height: <window_height - footer_height> }
#footer { height: 25px }
How could I achieve this using only CSS and HTML?
PS. I know there probably are some simple javascript solutions, but for educations sake, I want to know how to do this without javascript.
Have a look at this:
keeping footers at the bottom of the page
All the code is there.
Basically you do this in your HTML:
<html><body>
<div id="container">
<div id="map"></div>
<div id="footer"></div>
</div>
</body></html>
And then in your CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#map {
padding:10px;
padding-bottom:25px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:25px; /* Height of the footer */
}
There are other ways to achieve this and similar effects.
Let know if this is what you wanted.
Hope this helps.