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/
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%;
}
Im building a website and the footer wont stick at the bottom. Could someone help me with this issue?
CSS
#footer {
background-color: #454245;
bottom: 0;
float: right;
height: 200px;
left: 0;
margin-top: auto;
overflow: hidden;
position: relative;
width: 100%;
}
Try like this: LINK
HTML:
<div class="wrapper">
<p>Your content goes here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Footer content</p>
</div>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer,.push{
background-color:#ccc;
height: 155px;
}
You will have to provide position as absolute and it will only work when you can provide a wrapper or a parent div with position relative.
Look at this fiddle [http://jsfiddle.net/tLyC6/]1
You can have a sticky footer by setting its position: fixed (not relative) with bottom: 0
#footer {
background-color: #454245;
bottom: 0;
height: 200px;
overflow: hidden;
position: fixed;
width: 100%;
}
If you want footer to stick at the bottom, you can do it with using less code.
#footer {
background-color: #454245;
height: 200px;
margin:0 auto;
width: 100%;
}
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;
}
I have a web page with one big container for the entire page. Inside that <div> I have another <div> with float:left. Then, floating to the right of that child <div> I have a second container that will contain other <div>s. The secondary container is collapsing. I have searched and tried other solutions, but they didn't solve anything. BTW this is an html5 page <!DOCTYPE html>. Any ideas?
CSS:
body {
border: 0px;
padding: 0px;
margin: 0px;
background: white;
overflow: hidden;
height: 100%;
font-family: Hanuman;
}
#container {
margin: 0 auto;
background: red;
height: 100%;
width: 100%;
overflow: hidden;
}
#bibletree {
padding: 0;
margin: 0;
height: 100%;
width: 15%;
float: left;
background: blue;
overflow: auto;
white-space:nowrap;
}
#container2 {
margin: 0 auto;
height: 100%;
width: 85%;
background: gray;
float: right;
overflow: auto;
}
html:
<div id="container">
<div id="bibletree">
stuff here
</div>
<div id="container2">
there will be two other divs here as well. This one is collapsing.
</div>
</div>
Hi now give to body and html height 100%
As like this
body, html{
height:100%;
}
Demo
Does This solve the problem?
(adding overflow:hidden to #container2's rules?)
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!