I want that my footer is on the bottom of the page, but it won't work. There is always a scrollbar, why is that?
http://www.yannickluijten.be/luc/website/
#top {
position: relative;
width: 100%;
height: 50px;
background: #00aeef;
}
#wrapper {
position: relative;
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;
}
#footerbg {
width: 100%;
height: 20px;
background: #d7d7d7;
}
.push {
height: 20px;
}
<div id="top"></div>
<div id="wrapper">
<div class="push"></div>
</div>
<div id="footerbg"></div>
the wrapper should be a container for the content
Have a look here: http://jsfiddle.net/F577v/
<div id="top"></div>
<div id="wrapper">
<div id="content"><p>content here</p></div>
</div>
<div id="footerbg"></div>
I made the footer snap to the bottom outside of the wrapper, if you want to move the top outside that is also fine but remember you will have to adjust the bottom padding to compensate for its height too.
view the updated code here: http://jsfiddle.net/F577v/2/
Try the updated version: http://jsfiddle.net/F577v/8/
First of all, your containers don't need to be relative position.
Second of all, footer should be centered by setting a width and left/right margins to auto:
#footerbg {
width: 960px;
....
margin-left: auto;
margin-right: auto;
}
You have 2 options:
1) put the footerbg inside the wrapper
2) put in the footerbg the same style as in wrapper (same width & margin values)
Related
I'm trying to achieve a fixed left sidebar with fluid right content within a container.
I've checked out answers that tell me to set a margin-left on the content which is not what I want to do.
The closest I could get was through this answer:
A `position:fixed` sidebar whose width is set in percentage?
<div class="main-container">
<div class="sidebar">
<div class="sidebar-content-container">
<div class="sidebar-content">
<!-- Sidebar content here -->
</div>
</div>
</div>
<div id="content">
<!-- Scrollable Content Here -->
</div>
</div>
This is the CSS
.main-container {
height: 100vh;
max-width: 1366px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 100px;
width: 100%;
position: relative;
.sidebar {
float: left;
width: 20%;
height: 100%;
position: relative;
.sidebar-content-container {
height: 100%;
position: fixed;
.sidebar-content {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
}
}
#content {
height: 100%;
width: 80%;
display: inline-block;
float: right;
}
}
The way I have it done right now, once you inspect the sidebar, the width it calculates is not within the main-container but the rest of the viewport. What I'm trying to achieve is to keep the 20% calculation within the main-container without setting a fixed width.
So the yellow part represents the problem for me. Once I set it fixed, it doesn't stay within the parent container. My goal is after I set it to fixed, it stays within the red part.
I know I could do something like sidebar width 100px content margin-left 100px but that's not the objective and do not like any javascript alternatives.
Thoughts?
Thanks!
Your are using width:100% in this div and also padding which increases its width from 100% because padding adds to the width. So for giving the padding within the 100% width you can use property box-sizing:border-box as below:
.main-container {
height: 100vh;
max-width: 1366px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 100px;
width: 100%;
position: relative;
box-sizing:border-box;
}
Well, I guess that's the thing with fixed elements. They kind of have a mind of their own. Once an element is fixed, it doesn't seem to obey the overflow and dimension rule of its parent containers. They take their dimensions (if you are using %) from the browsers width. So I think what you should do is to give the fixed element the same dimension as its immediate container.
<div id="parent-box">
<div id="fixed-elem"></div>
</div>
//css
#parent-box{
position: relative;
width: 40%;
height: 100%;
float: left;
overflow: hidden;
}
#fixed-elem{
position: fixed;
width: 40%;/*this is 40% of the browser width not the container*/
height: 100%;/*this is 100% of the browser height*/
}
I am working on a small site. To make it easier to read I pushed all the content of the site into the center with.
body {
width: 500px;
margin-left: auto;
margin-right: auto;
}
The problem is that the div follows this rule and is only in the very center.
In the footer class I tried resetting the margins and width by setting them back to 100% but that didn't work.
.footer {
width: 100%;
margin-left: 0%;
margin-right: 100%;
}
CodePen
Instead of setting the entire body to 500px width, create a div for your main content, and then place the footer underneath.
#content {
width: 500px;
margin-left: auto;
margin-right: auto;
}
<body>
<div id="content">
<!-- Main page content here -->
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
Either place the .footer element outside of the wrapper element:
Example Here
In this case, use an element other than the body to function as the wrapper/container. I used an element with class .container:
.container {
width: 500px;
margin-left: auto;
margin-right: auto;
}
As an alternative, you could also absolutely position the .footer element and add left: 0; right: 0; in order for it take up the entire width of the page:
Example Here
.footer {
position: absolute;
left: 0;
right: 0;
}
Try moving the css from your body into a containing <div> and put all your content in that and have your footer below the containing <div> and if the element is unique use ids not class
e.g.
HTML:
<body>
<div id="mainContent">
<!-- Main site stuff here -->
</div>
<div id="footer">
<!-- footer info here-->
</div>
CSS:
body{
/*No CSS*/
}
#mainContent{
width: 500px;
margin-left: auto;
margin-right: auto;
}
#footer {
width: 100%;
margin: 0;
}
I have a main div contains two divs (one for heading and other for content). the main div is placed at the bottom of the html page with absolute positioning. When I hide content div, it sill takes up space in the bottom of the page.
I need to show only the header div to do a jquery toggle..
<div class="tll">
<div class="tllH">
</div>
<div class="tllC">
</div>
</div>
<style>
.tll{
background: yellow;
height: 100px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.tllH{
background: green;
height: 20px;
width: 100%;
}
.tllC{
background: magenta;
height: 80px;
width: 100%;
display: none;
}
</style>
For .tll, you set a height of 100px.
.tllH is only 20px and coincidentally .tllC is 80px.
This is because the height of main container is fixed,The solution is present in this fiddle.
Setting .tll{height: auto} fixed the issue!
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.
I have the following HTML / CSS code:
HTML
<div id = "content-wrapper">
<div class="stickyheader">
<div id="logo"></div>
<div class="nav">
<ul class="top_nav">
<li>Home</li>
...
</ul>
</div>
</div>
<div id="content-wrapper">
<div class="central_img_front">Some text</div>
<div class="welcome_container">Test</div>
</div>
...
</div>
CSS
.stickyheader {
background-color: white;
width: 100%;
height: 138px;
padding-top: 24px;
z-index: 1;
position: fixed;
top: 0;
}
#content-wrapper {
width:1000px;
margin:0px auto;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin-top: 162px;
}
.welcome_container {
margin: 413px auto 55px auto;
text-align: center;
width: 760px;
}
.central_img_front {
background-image: url(http://modeles-de-lettres.org/test/images/slide12.jpg);
width: 1920px;
height: 413px;
position:absolute;
left:-460px;
}
Full JSFiddle code is here: http://jsfiddle.net/ugnmc/
My problem is with content-wrapper part. There are two divs inside this div:
div.central_img_front
div.welcome_container
I need those divs to be exactly under div.stickyheader. Now as you can see in fiddle, div.central_img_front is pushed too far to the bottom (there are a lot of white space under div.stickyheader).If I remove div.welcome_container from HTML then everything is OK. So,
I really cannot get it - why div.welcome_container affects div.central_img_front?
EDIT:
div.central_img_front
is positioned absolute, because it is in container (wrapper). If I remove position:absolute, then it is positioned incorrectly and .
The white space is caused by .welcome-container, which has a huge margin-top.
Demo
Change is:
.welcome_container {
margin: 0px auto 55px auto;
// was margin: 413px auto 55px auto;
text-align: center;
width: 760px;
}
The position:absolute takes the div.central_img_front out of line and the div.welcome_container slides in before it. Can you just remove it?
hei men, check these fiddle, http://jsfiddle.net/N269j/.
The problem are the margings and the heights.