I structured my site like this:
<body>
<div class="main">
<div class="header">
content
</div>
<div class="section">
content
</div>
<div class="sidebar">
content
</div>
<div class="clearing"></div>
<div class="footer">
content
</div>
</div>
</body>
and the css
.main {
position:relative;
width:908px;
margin-top:0px;
border:solid 0px;
margin:0 auto;
}
.header {
position:relative;
height:200px;
margin: auto;
}
div.section {
float:left;
position:absolute;
width: 584px;
height:500px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align:left;
}
div.sidebar{
float:right;
position:relative;
width: 324px;
height:500px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align:left;
}
.clearing {
clear:both;
}
.footer {
position:relative;
left:0px;
top:0px;
width:908px;
height:300px;
}
When I add content to the div section, I goes all over the footer. The footer is fixed at that point, and as content is added, the page grows and the footer remains still.
What I have to do everytime I add content is to increase in the css file either the height of the section or the height of the sidebar - either one would work - but I increase both heights (section and sidebar) to the same value, because it seems the right thing to do. The footer then is pushed down as the height of the section and the sidebar grows.
However, if I atribute a height to the content that I add to the section, it does not have any effect on the position of the footer, perhaps because it has nothing to do with the height of the section itself.
Is there a way to make the footer respond to the space the content being added will occupy, and just automatically move along, remaining at the bottom of the page ?
You have position:absolute set on your .section div, which will only ever use its CSS height value for the amount of space it takes up, regardless of its actual content. Removing that absolute position should solve your problems. There's (almost) always a way around absolute positioning. In your example, it seems completely unnecessary.
Here's a helpful site for CSS positioning:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Hope it helps!
Try this:
.footer {
position:relative;
left:0;
bottom:0;
width:908px;
height:300px;
}
Also when putting 0, there is no need to add the px.
I am checking the CSS code and have spotted position in every div. Try to balance it because it affects other divs
Also try
.footer{
clear: both
}
Related
I have found a lot of solutions for sticky footer here on Stack Overflow and it works for me. However, I need to keep a 60px distance between my "content div" and my "footer div". In all the solutions I found so far, if I set margin-top: 60px for my "footer div" it didn't work.
A solution I found:
<div id="container">
<div id="body">
<div id="teste">
</div>
</div>
<div id="footer">
</div>
</div>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#teste {
background: red;
height: 500px;
}
#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;
margin-top: 60px; <---- this didn't work
}
The solution was simpler than I thought. Just increase the value of padding-bottom of my #body div.
Set margin-bottom:60px; on your "content-div". Your sticky footer has absolute positioning which removes it from the flow of the page. The margins you set on it won't interact with other elements. Setting a margin on your content div just makes that div stay 60px from the bottom of the page which is the space that your footer is occupying.
I'm putting together a Tumblr layout and I'm running into a snag. I got everything working fine, but as soon as I added my sidebar, the container stopped expanding the height of the page. It stops right under the end of the sidebar and I'm not sure why when previously it expanded the width of the content section.
URL: http://nellyswritingroom.tumblr.com/
Structural CSS:
#container {
margin: 0 auto;
padding: 30px 60px 30px 60px;
width: 900px;
}
#main {
margin-top: 50px;
}
#content {
width: 620px;
float: left;
margin: 0;
}
aside {
width: 220px;
float: left;
margin-left: 60px;
}
header#top {
text-align: center;
height: 293px;
margin-bottom: 8px;
}
header#top h1{
position:relative;
width:500px;
height:285px;
overflow:hidden;
float:left;
}
header#top h2 {
position:relative;
width:400px;
height:285px;
overflow:hidden;
float:left;
}
HTML skeleton:
<div id="container">
<header id="top>
<h1>
content
</h1>
<h2>
content
</h2>
</header>
<nav>Nav Goes here</nav>
<section id="content">
Content on the left
</section>
<aside>
Sidebar Content
</aside>
</div>
Any help would be greatly appreciated!
You need to add a clear: both; after the aside element closes.
So, after:
<aside>
Testing
</aside>
Add:
<div style="clear: both;"></div>
And you will see the issue should be resolved.
Of course, it would be better to make a .clear CSS class and call that, rather than using inline CSS.
Because #content is floated it is no longer part of the layout, thus the parent is only sized to contain the sidebar.
You should remove the float:left from the content section, and apply float:right to the aside. This does assume the content is always longer than the sidebar - if this isn't the case you can either employ a clearing element below both elements, or float the container as well, or look into display:block or relative positioning to position them next to eachother.
I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer).
(See Example for a visual)
The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the (original example) results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.
And the Following CSS results in a gap between the content and the footer.
html,body{
margin:0;
padding:0;
height:100%;
background:yellow;
}
.wrap{
min-height:100%;
position:relative;
}
header{
background:blue;
padding:10px;
}
#content{
height:100%;
width: 400px;
margin:0 auto;
background:orange;
padding:30px;
}
footer{
background:blue;
position:absolute;
bottom:0;
width:100%;
height:60px;
}
How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?
Thank you!
FIDDLE: http://jsfiddle.net/3R6TZ/2/
Fiddle Output: http://fiddle.jshell.net/3R6TZ/2/show/
CSS
html, body {
height: 100%;
margin:0;
}
body {
background:yellow;
}
#wrapper {
position: relative;
min-height: 100%;
vertical-align:bottom;
margin:0 auto;
height:100%;
}
#header {
width: 100%;
height: 150px;
background:blue;
position:absolute;
left:0;
top:0;
}
#content {
background:pink;
width:400px;
margin:0 auto -30px;
min-height:100%;
height:auto !important;
height:100%;
}
#content-spacer-top {
height:150px;
}
#content-spacer-bottom {
height:30px;
}
#divFooter {
width:100%;
height: 30px;
background:blue;
}
HTML
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-spacer-top"></div>
<div id="content-inner">
**Content Goes Here**
</div>
<div id="content-spacer-bottom"></div>
</div>
<div id="divFooter">Footer</div>
</div>
UPDATE
The #content-spacer-top and #content-spacer-bottom are used to pad the #content div without using padding or margin that would increase the box size past the 100% height causing problems.
In CSS3, there is the box-sizing property (more info here) that can fix this issue, but i'm assuming you don't want to depend on CSS3 features.
EDIT
Added a fix and tested down to IE7
UPDATE 2
Alternate method using :before and :after pseudo-elements instead of the spacer divs:
http://jsfiddle.net/gBr58/1/
Doesn't work in IE7 or 6 though, and to work in IE8, a <!DOCTYPE> must be declared (according to w3schools.com), but the HTML is nice and clean
UPDATE 3 (Sorry for so many updates)
Updated it to work down to IE6. I don't normally bother as my company doesn't support IE6, but it was an easy fix...
I think you need position: fixed on the footer:
footer {
width: 100%;
height: 30px;
position:fixed;
bottom:0;
}
I've been trying to create a webpage layout and I came across this issue.
<div id="pageWrapper">
<div id="pageHeader">
</div><!-- end of pageHeader -->
<div id="navTab">
<div class="navButtons"></div>
</div><!-- end of navTab -->
</div><!-- end of wrapper -->
and my css looks like
#pageWrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#pageHeader {
width:100%;
height:7%;
color:#DADADA;
float:left;
}
#navTab {
width:100%;
height:6%;
background-color:#000000;
float:left;
}
.navButtons{
width:100px;
height:90%;
margin:5%;
background-color:#ffffff;
float:left;
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
I'm trying to create a fluid layout and trying to add .navButtons div inside #navTab width a margin-top and bottom 5%...but when I give parameters in CSS it will not fit inside the div.. what am I doing wrong here???
Im adding a jsbin link http://jsbin.com/ezeqec/1/edit
umm, try removing that margin: 5% from that .navButtons. If you want the horizontal margins, make it margin: 0 5%;
Else, if you want that vertial margin too, just do this:
<div id="navTab">
<div class="navButtons"></div>
<div class="clearFloat"></div> <!-- added this -->
</div><!-- end of navTab -->
CSS changes:
.navButtons {
width:100px;
height:90px; /* in pixels instead of % */
margin:5%;
background-color:#ffffff;
}
#navTab {
width:100px;
height:90%; /* this should be in pixels, if you want to give % for navButtons */
margin:5%;
background-color:#ffffff;
}
If you want to give height in %, the parent element's height should be fixed. The parent element cannot have height in % or auto.
If you want navTab to contain it's child navButtons, which is floated, you need to add some CSS so force the element to expand. I find the easiest is overflow:auto.
The basic problem is that floating an element takes it out of the normal document flow, and so it doesn't get factored into height/width calculations.
Assign .clearfix to your pageWrapper and that should keep your wrapper from collapsing.
.clearfix:after {
clear:both;
content:".";
display:block;
font-size:0;
height:0;
visibility:hidden;
}
.clearfix {
zoom:1;
}
The first part of this article is a good refresher on floating elements but near the back half of the page are some good techniques on keeping your elements from collapsing when all of their child elements are floated.
Remove statements 'float' everywhere but in navTab.
AIM : I want to position footer based on many factors. It can be found here
1) I want to position the footer at the bottom of the screen if there is no content(or may be 1 or 2 lines) on my page. (footer visible without scrolling down - no scrollbars)
2) My footer has to be relatively placed below the last line of content if there is so much content in my page. So footer should adjust its position according to the content.
Note : The footer has to be consistent on different systems with different screen size/resolution... (a netbook is different from a laptop in its screen size).
Other INFO ----> There is a #footer_outer inside which the #footer lies.
#frame {
margin:0 auto;
width:962px;
margin-top:10px;
height:auto;
}
#content {
padding:5px 5px 5px 5px;
margin:0 auto;
width:890px;
height:auto;
min-height: 372px; /* i use this to have footer at the bottom of **my** screen when there is not much content. */
}
#footer_outer{
width:100%;
background:#444;
padding:10px 0 0 0;
height: 130px;
position:relative; /*to put footer_outer 50px below the content*/
top: 50px;
bottom:0px;
}
#footer {
margin:0 auto;
width:834px;
height:auto;
overflow:hidden;
}
Please help me in making changes to this CSS. Thank you very much!
<style>
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* fix negative height */
}
#footer, #push {
height: 100px; /* fix positive height */
clear: both;
background:#000;
}
</style>
<div id="wrapper">
<p>content here.</p>
<div id="push"></div>
</div>
<div id="footer">
footer
</div>
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
checkout this 5 different solutions and pick the best for you
1 to 4 can be found here
another one here
Due to the content being of variable lengths I can't see any other way than using JavaScript, especially if you want it different for different screen sizes. You'd need to first check the viewport height, then the height of #content, and do the maths to fit the footer where you want based on those numbers
Try to define your page container like this: height:100%; position:relative;
then, inside that container, place your footer div width, position:absolute; bottom: 0px;