Here is my problem, I am using a layout that has a sticky footer (using the cssstickyfooter.com method). inside my container div i have a content div that has four other divs inside of it. like so:
<div class="container">
<div class="content">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
</div>
<div class="footer"></div>
In order for the sticky footer to work correctly all of the divs need to have position:relative; set, because the divs will have content that will be different lengths and they need to re-size accordingly. however where my dilemma begins is that i need to have divs 1-4 have position:absolute; set, so that they will stack on top of each other having the same (x,y) position.
is there any way to achieve what i need?
I recommend Ryan Fait's sticky footer, works very well!
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
/* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -20px;
/* the bottom margin is the negative value of the footer's height */
}
.footer,
.push {
height: 20px;
/* .push must be the same height as .footer */
}
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
I typically just use the following to "stick" a div to the bottom of the page (or container):
.footer {position:absolute;bottom:0;left:0;}
Once you set position to absolute, it becomes independent of external divs and their position/dimensions.
Related
I am trying to have a webpage with a parallax screen and on the top a navigation bar. I have tried, everything I know and I cant get it to work.
The problem is caused by perspective:1px; in the body. Delete that line and position:fixed works but removing the perspective:1px break your parallax. Any transform css will cause position:fixed to revert to position:relative.
Is this effect on position: fixed necessary? If so, need to go into
more detail here about why fixed positioned objects should do this,
i.e., that it’s much harder to implement otherwise. See Bug 16328. https://www.w3.org/TR/css-transforms-1/#perspective-property
Instead of putting perspective:1px in the body which effects everything, you could put it in a wrapper div like this:
<div style="scrolling-content">
... the bits that scrolls...
</div>
and the css...
.scrolling-content {
width: 100vw;
height: calc(100vh - 70px);
overflow-y: scroll;
overflow-x: hidden;
perspective: 1px;
margin-top: 70px;
}
The 70px is the height (inclusive of padding) of your navigation bar.
Also set the body
body {
scroll-x:hidden;
scroll-y:hidden;
}
The problem is the overflow-y option on the style for body.
You could do the following:
Wrap both divs with class="section" in a seperate div, like this:
<div id="example">
<div id="title" class="section header">
<h1>Test</h1>
</div>
<div id="section1" class="section">
<div class='text'>
<p>test</p>
</div>
</div>
</div>
Then remove the overflow options from body and put them in the style for #example, like this:
#example {
height:100%;
overflow-y: scroll;
overflow-x: hidden;
perspective:1px;
}
I have replicated Ryan Fait's sticky footer. Here is the CSS and HTML for clarity:
<body>
<div class="wrapper">
// Content
<div class="push"></div>
</div>
<div class="footer">
<p>Lorem ipsum</p>
</div>
</body>
CSS:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
As you can see, it works nicely. What I don't understand though is how the height (note: height, not min-height) is explicity set for the body and yet it still expands beyond this value to accomodate content?
I hope my question is clear...
EDIT: The second comment on this answer seems to suggest that this shouldn't happen.
i feel really dumb for not being able to figure this out despite this being previously asked here. but can anyone explain why i cannot get the slider div to sit directly below the images + map and text content divs (these two should be on top, one to the left and one to the right)? clearly how im using absolute positioning is incorrect. any advice would be awesome. thx.
<style>
#container .container_body .images {
float: left;
}
#container .container_body .content {
float: right;
width: 355px;
}
#container .container_body {
margin-bottom: 35px;
background-color: pink;
font-size: 22px;
}
.slider-container {
background-color: red;
/*position: absolute;*/
}
.content {
background-color: blue;
}
.images {
background-color: green;
/*position: absolute;*/
}
</style> <!-- /.style -->
<!-- container ALL -->
<div id="container">
<!-- container BODY -->
<div class="container_body">
<p>container body here.</p>
<!-- IMAGES -->
<div class="images">
<p>images here.</p>
</div> <!-- /.images -->
<!-- TEXT CONTENT -->
<div class="content" style="width: 366px;">
<p>text content here.</p>
<!-- map -->
<div class="map">
<p>map media here.</p>
</div><!-- /.map -->
</div><!-- /.content -->
</div> <!-- /.container_body -->
<div class="slider-container"><!-- slider -->
<p>slider here.</p>
</div><!-- /.slider -->
</div><!-- /#container -->
When you have elements which are floating, you must apply a clear property to elements which you want to sit under the floating elements. Such as,
.slider-container {
clear:both;
}
The value of both just denotes to move the element down to clear both floating left and right elements. In your example above this should cover both float:left; and float:right; declarations.
By applying the above style to your existing markup, the slider sits under the images and text as intended. Here is a copy of my jsfiddle.
You have your images div floating left, so all content below in your html that can be displayed to the right is going to be displayed.
Then your next div, content, is floating right. It gets displayed at the same y-position (because the previous div is floating left), but anchored to the right of the screen. So the next div, your slider, goes to the left of your content div, and to the right of your images div because of the way the floats work. So the slider ends up in the middle.
try using the right property and relative positioning with your content div, like so;
#container .container_body .content {
/* float: right;*/
position:relative;
right: 0px;
width: 355px;
}
This is not a definite fix(You'll have to add a width to your image div, otherwise I believe it might get covered), but It does force your slider div below like you requested.
I've found 2 different implementations of a CSS sticky footer:
Ryan Fait sticky footer - http://ryanfait.com/sticky-footer/
Steve Hatcher sticky footer - http://www.cssstickyfooter.com/
Could someone explain the difference between how each of them work?
And if there are other known implementations, could you please post a comment or edit this question?
They are pretty similar in terms of function. The first forces a div to the full height of the page and then give it a negative margin the size of the footer.
html, body {
height: 100%; /*set 100% height*/
}
.wrapper {
min-height: 100%; /*content 100% height of page */
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* negative value causes wrappers height to become (height of page) minus 142px, just enough room for our footer */
}
.footer, .push {
height: 142px; /*Footer is the footer, push pushes the page content out of the footers way*/
}
What this does is makes sure that all content within the wrapping div is 100% of the page height minus the height of the footer. So that as long as the footer is the same size as the negative margin it will stick in the gap left and appear at the bottom of the element.
The second also forces the content to be 100% of the height of the page.
html, body {height: 100%;} /*set 100% height*/
#wrap {min-height: 100%;} /* make content 100% height of screen */
It then creates a space at the bottom of the main content the same size as the footer.
#main {overflow:auto;
padding-bottom: 150px;} /* wrapper still 100% height of screen but its content is forced to end 150px before it finishes (150px above bottom of screen) */
Then using position relative and a negative top margin forces the footer to appear 150px above its normal position (in the space it just made).
#footer {position: relative;
margin-top: -150px; /* Make footer appear 150px above its normal position (in the space made by the padding in #main */
height: 150px;
clear:both;}
Note: This only works so long as your page content is kept within .wrapper and #main inside #wrap respectively, and your footer is outside of these containers.
If you didn't understand any part of that leave me a comment and I'll try to answer it.
Edit: In response to user360122
HTML markup for first:
<html>
<body>
<div class="wrapper">
<!--Page content goes here-->
<div class="push">
<!--Leave this empty, it ensures no overflow from your content into your footer-->
</div>
</div>
<div class="footer">
<!--Footer content goes here-->
</div>
<body>
</html>
HTML markup for second:
<html>
<body>
<div id="wrap">
<div id="main">
<!--Page content goes here-->
</div>
</div>
<div id="footer">
<!--Footer content goes here-->
</div>
</body>
</html>
Remember to include the stylesheet and declare doctype .etc (these aren't full html pages).
There is an example in the bootstrap documentation which seems to be very simple: http://getbootstrap.com/examples/sticky-footer/
No wrapper or push needed.
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
I have a absolutely position div that is overlapping a containers background due to it having a larger height. This div is sharing the container with a body div that's sitting happily to the left of it.
Is there a way to extend the container to be the height of the absolutely positioned div, rather than the body content?
Or should I just float the divs side by side and chuck a <div style="clear: both"></div> at the bottom of the two? Seems like a messy hack to get a container to extend :/
EDIT: Comments don't seem to like code structure. So I'll edit it into here as well.
The layout is:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
#content has a repeated background and #container sets the fixed width of the page. #header sits up to for the links and #main holds the two columns which have the main content for the page. I can't get those two columns to sit next to each other (float / absolutely) whilst having the #content's background repeat down below them
With this layout:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
your basic CSS should be something like:
html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }
You said you wanted the background image appearing below the content. From this I assume you mean you want the page to be full screen height (minimum).
The point of absolute positioning is that it removes the element from the normal flow so no you can't have it's "container" extend to include it because technically it has no container.
Absolute positioning has its place but 9 times out of 10 I get better results with a float-based layout. But I can't really say more without more information.