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 ?
Related
In the wordpress-theme Avada (A demo site) I can see that they're using some background-effect for overlapping both backgrounds and text-elements at the same time. The first heading is overlapped by the "Who we are" section. How do they do this?
Look for the div with the class tfs-slider flexslider main-flex
<div class="tfs-slider flexslider main-flex" ...>
You will notice that it has the attribute position: fixed. This means that it does not scroll with the content. In addition, they have changed the z-index properties of various elements so that it stays beneath the menu at the top and the content that flows up over it.
Basically this resumes down to this CSS property:
background-attachment: fixed;
Here I have a basic example for you: http://jsfiddle.net/1j3w8ru6/
Here is a really simple working example
What we are doing here is setting the position of the first heading to "fixed", pushing the content just below the screen with "margin-top", and setting the content's z-index to a higher value than that of the first heading.
Here is the CSS:
html,
body {
width:100%;
height:100%;
}
#heading {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:#000000;
z-index:2;
}
#content {
width:100%;
position:relative;
z-index:3;
background:#FFFFFF;
margin-top:100%;
}
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.
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
I have a CSS generated section of an HTML page. It is currently positioned to be in the main content region of the page, which is right of a navigation bar. I have a graph that needs to be centered to the whole HTML page, which includes being under the navigation bar.
How would I use CSS positioning to overlay a block of HTML code (which has some CSS too) to be centered over the whole page.
I have a hunch as to how to do this:
I think that I need overlapping CSS section to go under the navigation bar.
.layout #mainContent h6 {
position:absolute;
left:-1000px;
top:-10px;
z-index:5
}
The HTML to be overlayed will go under h6.
The HTML will be written like this
<h6>
All the HTML code to be overlaid
</h6>
I more or less want a way to center all the code in a section of my html, but it has to be centered relative to the whole HTML page, not just the CSS boxed section.
We centre things often using css and this is how we'd do it:
.layout #mainContent h6 {
position:absolute;
left:50%;
margin-left:-1000px; /* half the element's width */
top:50%;
margin-top:-10px; /* half the element's height */
z-index:5
}
But of course to centre the height in all browsers & screen resolutions you have to add the following conditions to body tag, otherwise the browser will assume the body is only as high as it's content (ie. 20px in your case).
body {
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
margin-right:0px;
top:0;
bottom:0;
left:0;
right:0;
height:100% !important;
width:100%;
}
You can do this by setting a fixed width and height to the overlay content. eg:
.layout #mainContent h6 {
width:200px;
height:20px;
position:absolute;
top: 50%;
left: 50%;
margin-top:-10px; /* half element's height */
margin-left:-100px; /* half element's width */
z-index:1000
}
Demo: http://jsfiddle.net/P95Bz/1/
I have a div:
clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;
And a html, body:
html, body {
height:100%;
width:100%;
}
/* Body styles */
body {
background:url(../images/background.png) top center no-repeat #101010;
color:#ffffff;
}
My code is basically 20 loren ipsum paragraphs followed by the div.
Now i tried setting position to relative and absolute and etc but with absolute the div aligns itself to the bottom of the screen so when you scroll down the div scrols with it
I tried setting it to relative but when theres not enough content to make the page scroll, the div is not at the bottom of the page.
I tried fixed but that just fixed it.. no use to me
How can i get the div to be at the bottom of the screen and page depending on if theres scroll or not
Ok, fixed and working :D Hope it does what you want it to.
Preview here: http://jsfiddle.net/URbCZ/2/
<html>
<body style="padding:0;">
<div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; ">
test content :D
</div>
<!--Content Here-->
</div>
</body>
</html>
Shorter solution:
.footer {
bottom: 0%;
position: fixed;
}