Here is the html
<div id = "wrapper" class = "selfclear">
<div id = "contentDiv" class = "selfclear">
</div> <!-- End contentDiv -->
</div>
<div id = "footerDiv" class = "selfclear">
</div> <!-- End footerDiv -->
Here is the css:
*
{
margin: 0;
padding: 0;
border: 0;
}
.selfclear:after
{
content: ".";
float: left;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
html, body
{
height: 100%;
}
#wrapper
{
width: 100%;
min-height: 100%;
background: url( "../images/landing_page_bg.png" );
}
#contentDiv
{
padding-bottom: 340px;
overflow: auto;
border: 1px solid green;
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 500px;
}
#footerDiv
{
position: relative;
width: 99.9%;
clear: both;
height: 340px;
margin-top: -340px;
border: 1px solid green;
background: url( "../images/landing_page_footer.png" )no-repeat;
background-size: 100%;
}
basically when zooming in/out in the browser the sticky footer overlaps the top content, why, and how do stop it from doing that, thanks.
Here is the code in a working environment.
http://jsfiddle.net/9X753/
You can't say your footer is "sticky" in that case. I sugger you reading this tutorial instead: http://www.alistapart.com/articles/footers/
I'm using this method and it works perfectly.
By looking at your code, it reminded me a tutorial... after a 2min search, here it is:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
By the structure of your HTML, it is just like you want :)
Hope it helps!
Related
I have 3 divs, main, right and left. The main div contains the right and left div and I want to align the right and left div side by side. I have read few posts here but have not been able to get the desired results.
https://jsbin.com/lagikaxiwe/edit?html,css,output
html,
body {
margin: 0;
padding: 0;
}
div#main-content {
background-color: bisque;
height: 100%;
}
div#right-content {
position: relative;
width: 35%;
height: 100%;
background-color: #ffffff;
}
div#left-content {
position: absolute;
width: calc(100% - 35%);
height: 100%;
margin: 0px 0px 0px 666px;
background-color: #00aeef;
}
<div id="main-content">
<div id="right-content">
</div>
<div id="left-content">
</div>
</div>
The simplest method nowadays to use display: flex on the container. Have a look at the settings in my snippet - I erased a lot of the other settings, which are not necessary...
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
div#main-content {
background-color: bisque;
height: 100%;
display: flex;
}
div#right-content {
width: 35%;
height: 100%;
background-color: red;
}
div#left-content {
width: 65%;
height: 100%;
background-color: #00aeef;
}
<div id="main-content">
<div id="right-content">
</div>
<div id="left-content">
</div>
</div>
html,
body {
margin: 0;
padding: 0;
}
div#main-content {
background-color: bisque;
height: 100%;
width: 100%;
}
div#right-content {
float: left;
width: 35%;
height: 100%;
background-color: #ffffff;
}
div#left-content {
width: calc(100% - 35%);
height: 100%;
background-color: #00aeef;
float: left;
}
I would personally use display:inline-block to align the left and right divs
side by side and add the necessary widths to add up to 100% of the parent width. Be sure to use font-size:0 on the parent to eliminate the white space between the left and right divs so they sit next to each other correctly.
Be sure to assign font-sizes to your left and right content so your content actually shows up!
This method is largely backwards compatible with all browsers.
div#main-content{
font-size:0;
}
div#left-content{
display:inline-block;
vertical-align:top;
width:65%;
}
div#right-content{
display:inline-block;
vertical-align:top;
width:35%;
}
I am trying to get my footer to be at bottom of page, header at top of page and section in the middle of page. But all I get is the red footer displayed on top of page. The background wrapper should be gray but that doesn't work either. Please help. Thank you.
Here is the css:
body {
margin: 0 auto;
}
#wrapper {
position: relative;
background-color: gray;
height: 100%;
width: 100%;
}
header {
position: absolute;
top:0;
width: 100%;
height: 20px;
background-color: red;
}
section {
position: absolute;
width: 100%;
height: 100px;
margin-top: auto;
margin-bottom: auto;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: blue;
}
below is the body of the html:
<body>
<div id="wrapper">
<header>
</header>
<section>
</section>
<footer>
</footer>
</div>
</body>
Just add this to html/body:
html, body {
height: 100%;
}
You should have to use position: absolute;. It tends to mess up all of your spacing when used in parent elements like that. The section section will be placed right over the header section because it hasn't been positioned at all.
Try just giving the section a min height and removing the position attributes.
Hope this helps.
You were close. Replace the CSS definition for <body>:
html, body{
margin: 0 auto;
width: 100%;
height: 100%;
}
make this in following class in your code :
html {
height: 100%;
}
body{
margin: 0 auto;
height: 100%;
}
section{
position: absolute;
width: 100%;
height: 100px;
top:20px;
}
DEMO
Remove the position absolute from the header, footer and section. I think it might be it.
Made an image for better understanding of the problem.
Need code for .bgimage and .content div
Is this even possible for crossbrowser css (IE7+ and other major browsers) without any scripting?
It was actually a bit longer than expected, but I got your picture in real life. Don't ask again any questions here without doing more research first and writing some actual code.
Here is a demo
The code
HTML:
<body>
<div id = "header">
</div>
<div id = "bgimage">
</div>
<div id = "content">
</div>
<span class = "clear"></span>
<div id = "footer">
</div>
</body>
CSS:
*
{
margin: 0;
padding: 0;
}
body
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
#header
{
width: 100%;
height: 200px;
background-color: purple;
}
#bgimage
{
position: absolute;
top: 200px;
left: 0px;
right: 50%;
height: 600px;
background-color: green;
}
#content
{
position: relative;
width: 700px;
height: 600px;
float: right;
z-index: 2;
background-color: blue;
}
.clear
{
clear: both;
}
#footer
{
position: relative;
top: 600px;
width: 100%;
height: 200px;
background-color: red;
}
Note: I haven't optimized the CSS, there's some work that could be done there.
The code is also here
Explanation
Elements that I've used in the code (you might want to google them):
CSS Reset
CSS clear
absolute positioning CSS
relative positioning CSS
Here's my working example:
http://jsfiddle.net/UGhKe/2/
CSS
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: 5em;
}
.content {
position: absolute;
top: 5em;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
HTML
<div id="body">
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
I want the content to be positioned below the header when you scroll the top (but hidden when you scroll down, under header) - this works fine...
However I need to remove top: 5em and use something like "inherit the current height of the header" - is it possible without JS?
If it's really not possible without JS, then I can just use JS but I'd rather try and find a solution in pure CSS.
EDIT:
I should note that the reason I can't use top: 5em is because the header will not have a fixed height - an image (for a logo) will be used inside of the text, and that would be set to max-width: 100% so that it shrinks to right width for an iPhone and doesn't expand too much on say an iPad.
See if thats work for you. http://jsfiddle.net/UGhKe/3/
I added another div with the same height but "non-fixed" to simulate your fixed header.
HTML
<div id="body">
<div id="blockHeader"></div>
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
CSS
html, body { margin:0; padding:0; }
#blockHeader
{
width:100%;
height: 5em;
}
.content {
position: absolute;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
You can do it using variables(Use SASS or LESS for that). Take a look at the pen.
CODE:
$headerContentVariable: 5em;
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: $headerContentVariable;
}
.content {
position: absolute;
top: $headerContentVariable;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
here is the sample html:
<div id = "mainWrapperDiv">
<div id = "mainDiv">
<div> testing </div>
</div>
</div>
<div id = "footerDiv">
</div>
its css:
*
{
padding: 0px;
margin: 0px;
}
body, html
{
height: 100%
}
div
{
border: none;
}
#mainWrapperDiv
{
min-height: 100%;
height: 100%;
margin-bottom: -200px;
}
#mainDiv
{
margin: 0px auto 0px auto;
width: 1000px;
min-height: 500px;
background: lightgreen;
}
#footerDiv
{
height: 200px;
width: 100%;
position: relative;
clear: both;
background: lightblue;
}
What sticky footer are you using? What does your code look like? You could try
http://www.cssstickyfooter.com/
Because the position is set to relative. and also the margin-bottom: -200px;
It's because of your margin-bottom in the #mainWrapperDiv. If you take that out it appears to work okay. Check it out http://jsfiddle.net/kA6XJ/