I made an HTML page that includes a header, 3 columns(left, main and right) and a footer.
In the main column I have a table with a height of 100%, so pretty large. Now I want to have my footer under the table.
I do not know what is wrong but my footer is not placed at the bottom, in my case it is almost at the middle of the main table.
The html, body and main class are also set to height 100% so that is working perfect.
The only problem is the footer..
On request here is some more code:
<body>
<div id="wrap">
<div id="hoofding"></div>
<div id="inner-wrap">
<div id="navigatie" style="font-family:old stamper">
<font size="9">Home</font>
</div>
<div id="main">
<div id="right"></div>
<table id= "tabel1">
<div id="inhoud">
<tr><td><p style="font-family:army of darkness"><font size="30">Lettertype 1: The Quick Brown Fox</font></p></td></tr>
<tr><td><p style="font-family:USSR army"><font size="30">Lettertype 2: The Quick Brown Fox</font></p></td></tr>
</div>
</table>
</div>
</div>
</div>
<div id="footer"><font size="1">Copyright © 2013 The Pack</font></div>
</body>
And the CSS file:
html {height:100%; width: 100%;}
body {
margin:0;
padding:0;
height:100%;
width: 100%;
background-color: blue;
}
#hoofding{
margin-right: auto;
margin-left: auto;
height: 355px;
width: 620px;
background-image: url(Afbeeldingen/The%20Pack.png);
}
#navigatie{
z-index: 15;
position: fixed;
height: 50px;
width: 8%;
margin-right: auto;
margin-left: auto;
padding-right: 1%;
padding-left: 1%;
}
#inhoud{
z-index: 2;
position: absolute;
padding-top: 3%;
padding-bottom: 3%;
}
#tabel1{
height: 100%;
width: 70%;
z-index: 1;
background-image: url(Afbeeldingen/Inhoud.png);
margin-left: auto;
margin-right: 15%;
bottom: 0;
padding:15px;
}
#wrap {
position:relative;
min-height:100%;
}
* html #wrap {height:100%; width:100%}
#inner-wrap {
padding-bottom:20px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
#footer {
position:absolute;
height:18px;
background-color: red;
bottom:0px;
color:white;
text-align:center;
clear:both;
}
#left {
position:fixed;
float:left;
width:10px;
text-align:center;
}
#main {
position:absolute;
margin-left:10px;
margin-right:10px;
width: 100%;
height: 100%;
}
#right {
float:right;
width:10px;
text-align:center;
}
#content {
padding:5px;
margin-right:10px;
text-align:left;
}
Thank You
use
bottom: 0;
rather than
margin-bottom: 0;
i think it will work for you.
Try:
#footer{
position:absolute;
bottom: 0px;
text-align: center;
}
Related
So I have been looking around on the internet to find a solution in order to make the footer stay at the very bottom on the page regardless of the length of the content of the page. I have followed the CSS from tutorials, the footer is only at the bottom of the page if the content is not long enough, if the content is much longer, the page will get the scroll bar and the footer will get stuck in the middle of the page as you scroll down for more content. Below is my CSS and HTML.
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
Now this is my html, the two absolute positioned divs and the footer are inside the wrapper which has position relative.
<html>
<body>
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Try to use this above in Css code
<div style="width: 100%;height: auto;border:1px solid red;float:left;">
<div style="width: 100%;height: auto;border:1px solid green;float:left;">
</div>
<div style="width: 100%;height: auto;border:5px solid Yellow;position: fixed;float:left;margin-top: 50%;">
</div>
</div>
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:fixed;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
change #footer to
position:fixed;
Please try this css and see fiddle link:
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
background: #0000ff none repeat scroll 0 0;
height: 1300px;
left: 20%;
position: relative;
width: 1024px;
}
.container {
background: #0000ff none repeat scroll 0 0;
height: 86px;
left: 20%;
margin-bottom: 3%;
max-height: 300px;
position: relative;
top: 0;
width: 1024px;
}
#footer {
background: #f2f2f2 none repeat scroll 0 0;
bottom: 0;
color: #000099;
height: 100px;
left: 0;
max-height: 900px;
position: absolute;
width: 100%;
}
https://jsfiddle.net/tn30t1k7/2/
Otherwise you can reffer this link:
http://www.cssstickyfooter.com/
<body>
<section class="wrapper">
<main class="content">
content
</main>
<footer class="footer">
footer
</footer>
</section>
</body>
html {
position: relative;
min-height: 100%;
}
body{
margin: 0 0 60px 0;
}
/* don't do that */
/* .wrapper {
position: relative;
} */
.content {
background: green;
height: 200px;
/* height: 700px; */
}
footer{
position: absolute;
bottom: 0;
left:0;
width: 100%;
height: 60px;
background-color: orange;
}
How about this https://jsfiddle.net/zkto8o88/2/.
.footer class will search for the nearest parent with relative position which in this case is html tag.
If the .wrapper class would have the position relative property then it would not work.
when i use float left in my inner divs they pushes down . i used clear:both bt not working. what to do??? it is also not possible using position absolute. i didnt face this kind of problem with float: left or float:right
css code:
.product-list{
min-height:10px;
background-color:white;
position:relative;
top:35px;
padding:3px;
margin:0;
background-color:red;
}
.product-list-div{
padding:0px;
min-height:40px;
background-color:navy;
}
.product-image-div{
width: 50px;
background-color: black;
height: 20px;
position: relative;
padding: 0;
margin: 0;
float: left;
}
.product-details-div{
width:200px;
background-color: lime;
height: 10px;
position: relative;
padding: 0;
margin: 0;
float: left;
}
html code:
<div class="product-list">
<div class="product-list">
<div class="product-list-div">
<div class="product-image-div"></div>
<div class="product-details-div"></div>
</div>
</div>
Remove extra product-list div from your code. And also clear the floated divs, I have added overflow: hidden to product-list-div
<div class="product-list">
<div class="product-list-div">
<div class="product-image-div"></div>
<div class="product-details-div"></div>
</div>
</div>
product-list{
min-height:10px;
background-color:white;
position:relative;
top:35px;
padding:3px;
margin:0;
background-color:red;
}
.product-list-div{
padding:0px;
min-height:40px;
background-color:navy;
overflow: hidden;
}
.product-image-div{
width: 50px;
background-color: black;
height: 20px;
position: relative;
padding: 0;
margin: 0;
float: left;
}
.product-details-div{
width:200px;
background-color: lime;
height: 10px;
position: relative;
padding: 0;
margin: 0;
float: left;
}
Check this Demo
I have a footer div that sits on the bottom with a min-height: 100% parent named #container. That's working great, but I'm trying to make the height: 100% for the div named #content and I can't seem to get it. Any ideas?
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
background: rgb(226,226,226);
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
height: 165px;
width: 70%;
margin-left: auto;
margin-right: auto;
background: rgb(142,0,0);
}
#content {
padding:10px;
padding-bottom:100px;
width:70%;
left: 15%;
height: 100%;
margin-left: auto;
margin-right: auto;
background: rgb(252,252,252);
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 100px;
width: 70%;
left: 15%;
background: #1e5799;
}
HTML:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Demo Fiddle
Add a new rule:
#header, #footer, #content{
box-sizing:border-box;
}
Then add the below to your rule for #content, also removing height:100%:
position:absolute;
bottom:100px; /* <--height of footer */
top:165px; /* <--height of header */
I am working on a structure to have a top navigation fixed, a left nav to be scrollable and a right nav to be fixed.
I have created a fiddle here. just need help with the css.
http://jsfiddle.net/PxbX9/
#header {
position:fixed;
background:red;
width:700px;
height:30px;
}
#left-block {
float:left;
width:350px;
background:blue;
height:1000px;
margin-top:30px;
}
#right-block {
float:left;
width:350px;
height:1000px;
background:pink;
margin-top:30px;
.fixed-block {
postion:fixed;
height:1000px;
}
This can be achieved by restructuring your CSS to this:
#header {
position:fixed;
background:red;
width:700px;
height:30px;
}
#left-block {
float:left;
width:350px;
background:blue;
height:1000px;
margin-top:30px;
}
#right-block {
display: inline-block;
float:right;
width:350px;
height:1000px;
background:pink;
margin-top:30px;
position:fixed;
}
I've only made CSS changes to the #right-block selector.
Removed the class .fixed-block, which had a typo in the form of postion (should be position).
position: fixed; has been added to the #right-block selector.
display: inline-block; and float: right; have been added also.
DEMO
Hope this helps.
Take a look at that Working Fiddle
Pure CSS solution, Very Dynamic, Totally responsive.
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="RightContent">
</div>
<div class="LeftContent">
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Wrapper > div
{
height: 100%;
overflow: auto;
}
.LeftContent
{
/*for demonstration only*/
background-color: #90adc1;
}
.RightContent
{
float: right;
width: 500px;
/*for demonstration only*/
background-color: #77578a;
}
I have a div nested inside another
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
THE CSS is as
#wrapper{
width:800px;
}
#left{
float:left;
width: 200px;
}
#right{
float: left;
width: 600px;
}
#footer{
width:800px;
height: 20px;
}
How can i ensure that the footer stays at the bottom of the wrapper div?
http://jsfiddle.net/LMeZ9/
just use clear:both
#footer{
width:800px;
height: 20px;
clear:both
}
You can solve this by using positioning:
#wrapper{
width:800px;
height: 600px;
position: relative;
border: 1px solid #333;
}
#left{
float:left;
width: 200px;
}
#right{
float: left;
width: 600px;
}
#footer{
width:800px;
height: 20px;
position: absolute;
bottom: 0;
}
Demo here.