I am having some issue trying to implement sticky footer, that is to make the footer stay at the most bottom of the page, I think this problem is due to the fact that I use 2 divs to render rounded corners for my page, I have searched for all possible solution and tried them, nothing works.
So basically, this is my design:
<div class="global">
<div class="wrapper">
<div class="banner"></div>
<div class="content"></div>
<div class='footer'>
<div class='footercontent'>COPYRIGHT INFO</div></div>
</div>
</div>
This is my CSS:
body {
font-family: Verdana, Geneva, sans-serif;
}
#global {
margin: 0 auto;
width: 85%;
min-width: 1020px;
}
.wrapper {
background: #FFFFFF;
}
.footer {
background: url('../Images/roundedcornerRIGHT.gif') no-repeat bottom right;
}
.footer div {
height: 40px;
background: url('../Images/roundedcornerLEFT.gif') no-repeat bottom left;
}
.footercontent {
text-align: center;
font-size: small;
}
No matter what solution I try posted by other people on Stackoverflow, nothing works, it will either not move the footer down to the bottom of the page, or it just messes up with the footer's layout of the rounded corners.
Try this:
.footer {
background: url('../Images/roundedcornerRIGHT.gif') no-repeat bottom right;
position: absolute;
bottom: 0;
}
If you want footer at the bottom give a minimum height to your content.
min-height: 800px;
Change your markup to this:
<body>
<div class="wrapper">
<div class="banner"></div>
<div class="content"></div>
</div>
<div class='footer'>
<div class='footercontent'>COPYRIGHT INFO</div></div>
</div>
</body>
And then add these styles:
.footer {
position:fixed;
left:0px;
bottom:0px;
width:100%;
}
Okay, so assuming you want to keep everything you are currently doing.. I have a quick fix for you. Now, a few things to note.. I did add in a height variable to your 'wrapper' class because I needed to gauge it as if there were space inside of the wrapper itself. I also went ahead and put in a few colors to let me know exactly where I am. Either way, the simplest fix is to take your footer div and put it outside of the wrapper. The way this all works is, the footer is showing up inside of the wrapper class, the only problem is that nothing else is showing up in that class, which causes the footer to be the only thing.. creating the problem of having this footer at the top. However, if you would like to stay current with every page, moving the footer down to the bottom of the global div should be your fix, the code below:
<div class="global">
<div class="wrapper">
<div class="banner"></div>
<div class="content"></div>
</div>
<div class='footer'>
<div class='footercontent'>COPYRIGHT INFO</div>
</div>
</div>
So the problem really was in the HTML, not the CSS. You can keep your CSS or play with it as you please but to better describe what I am saying, I have been fiddling (haha) with a JsFiddle for you :) Comment below if I need to make more sense of what I am saying!
Related
I want to place a footer div at the bottom of the page. The problem is, I have a dynamic content, so I can not work with "position: fixed;".
The page looks something like this:
<body>
<div id="container">
<div id="navbar">...</div>
<div id="content"></div>
<div id="footer">...</div>
</div>
When I click a link in the navbar, another content is loaded with ajax and written in the "content" div. So the height of the page changes. The footer must always be at the bottom of the screen, when there is no overflow of the content and must be at the bottom of the page, when the content gets too long. How can I realize this?
with dynamic content, you can always use this:
sticky-css-footers-the-flexible-way
always helps!! :)
==================================================================================
EDIT
see this demo
CSS
html, body, #container {
height: 100%;
margin:0;
padding:0;
}
body > #container {
height: auto;
min-height: 100%;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color:grey;
}
#content {
padding-bottom: 3em;
}
HTML
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">My Dynamic Footer</div>
Note : In the fiddle, un-comment the text to see the footer stretching the height after a dynmic height content!!
Reference : Refer here
You're going to want to check out "CSS Sticky Footer": https://css-tricks.com/snippets/css/sticky-footer/
That's the solution you're looking for.
Yo can use this Structure:
position:absolute;
bottom:0;
width:100%;
height:150px;
and set
position:Relative
for its parent.
I've been tasked with changing a website around a bit, and right now, the website has a responsive layout that is 95% of the viewports width, body-wise, so it will adjust if resized.
This is great, I want it to keep doing that, but I want the footer to have a side-to-side calm blue background, and I'm not able to come up with a way to do that for some reason.
Can anyone help?
Try this - DEMO
HTML
<div id="container">
<h1>TITLE</h1>
<section>MAIN CONTENT</section>
<footer> FOOTER </footer>
</div>
CSS
#container {
width: 95%;
margin: auto;
background: honeydew;
}
footer {
position: absolute;
width: 100%;
background: beige;
margin-left: -2.5%;
}
body contains all the other elements. You thus aren't supposed to have one larger than body inside of it.
Although you could position it absolutely to the bottom-left corner (position: absolute; bottom: 0px; left: 0px;) with a width of 100% and possibly make it work, I'd suggest you instead make a container element, perhaps a div, inside of the body element that contains your 95%-width elements and place the footer outside of that container.
I am not sure of which method is more reliable, however.
Have You tried to wrap existing 'header'component by other 'wrapper' component (div, span, etc.)? Example:
<div id="wrapper" width="100%"
<div id="header" width="95%">
some header stuff here
</div>
<!-- foo bar -->
<div id="footer" width="100%">
my footer
</div>
</div>
How can I add a repeated css background with an padding/space on top.
Here is my HTML Structure.
<div class="flare">
<div class="clouds">
<div class="clouds_bottom">
<div class="header">
contents
</div>
<div class="content_body_wrapper">
contents
</div>
<div class="footer">
contents
</div>
</div>
</div>
</div>
and my css code that is not working.
.clouds_bottom {
background: url('../img/clouds_bottom_bg.png') repeat left 250px;
}
Cheating is allowed with CSS. Instead of placing you background 100% away from top cover it with another div with original background [color].
html:
<html>
<body>
<div id="cheated_background">
</div>
<div id="body">
content
</div>
</body>
<html>
css:
body {
background: lightblue; /* your clouds :) */
}
#cheated_background {
position: absolute;
top: 0px;
background: white;
width: 100%;
height: 100px;
}
#body {
position: relative;
}
Check out live example.
Try using repeat-x instead of repeat? If it is repeated vertically, you will not be able to see the margin created by the background-position.
Edit to comment: If you need the repeat in both directions, what I could think of is a three-layer structure. You would need a container div with position:relative into which you could put three divs having position:absolute. The bottom one would have the repeated background picture, the middle one would be white and cover the top portion of the bottom one only, the top one would contain your actual content.
im facing a problem where i need some advice.
I want to have a couple of main div containers lets say
<div class="main">
one to another to the right.
All main containers should have full width and height (fullscreen).
On the right I need a couple other main containers with the size and width of the former.
Is it possible to set the divs one another to the right without reading and setting it with javascript? Is there a css/html solution?
Example:
<div class="main"><!--to the right one more -->
</div>
<div class="main"><!--to the right one more -->
</div>
<div class="main">
</div>
Style: #This doesn't work...
.main{
width:100%;
height:auto;
float: right;
}
I may have misunderstood the question, but try
html, body {
height: 100%;
}
body {
width: 300%;
}
.main {
height: 100%;
width: 33.333333333%;
float: left;
}
http://jsfiddle.net/3yaJZ/
hope what i've understood is what your trying to tell.. from my understanding,you want 3 div's ( main ) that will be in one bit component ( container ) each of which is 100% width and you can check each div as you scroll horizontally....
In your Css
body{
width:300%;
height:100%;
}
.main{
width:100%;
height:100%;
float:left;
}
And your html --
<body>
<div class="main"><!--to the right one more -->
</div>
<div class="main"><!--to the right one more -->
</div>
<div class="main">
</div>
</body>
I got a centered website with a fixed width. Now, I want to add an ad banner of fixed width/height to the right side of the page.
There is a wrapper div of width 700px. But I can't get my banner on the side. I dont know why. Can someone help me please with my CSS id?
<div class="wrapper">
<div class="head"></div>
<div class="content"></div>
</div> //wrapper
EDIT:
Image - (link removed as broken)
This is what I want. I got the orange one. I don't want to set the banner position to the right browser border. It should be near the wrapper class.
If you want the banner to be inside the wrapper:
HTML
<div class="wrapper">
<div class="banner"></div>
<div class="head"></div>
<div class="content"></div>
</div>
CSS
div.banner { float: right; width: 100px; height: 400px; }
If you want it outside the wrapper:
HTML
<div class="banner"></div>
<div class="wrapper">
<div class="head"></div>
<div class="content"></div>
</div>
CSS
div.banner { float: right; width: 100px; height: 400px; }
You can also check out this site for a bunch of different CSS/HTML layouts:
http://layouts.ironmyers.com/
Following Edit...
I think this question at Stack Overflow has what you want.
Go to this site and you will find the answer to your question and all the your future questions (judging by your question)
http://www.w3schools.com/css/css_float.asp
put the give the ad-div in the wrapper-div, give it an absolute position and move it to the right. Make sure to give the wrapper-div a relative position.
html
<div id="wrapper">
<div id="ad">ad</div>
</div>
css
#wrapper{
position: relative;
}
#ad {
position: absolute;
right: -140px;
}
The wrapper div will still be centered, the ad-div will 'hang' next to it.
Did you try using float: right property ?