I am working on a new page with a static header, two content columns, and a sticky footer. Everything is working of except that my footer keeps rolling under my content. I'd appreciate any help that can be given to get it to stop going under my content.
I tried the suggestions found in to no avail:
Content going under footer in Google Chrome and not FF
Content scrolling on mobile page with fixed header/footer
Placing footer under content doesn't seem to work
Why is my footer not going to the bottom of the page?
CSS:
body, html {
height: 99%;
}
#page {
position: relative;
margin-bottom: -100px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
height: 100%;
min-height: 100%;
}
#header {
clear: both;
float: none;
min-width: 0px;
margin-right: 0px;
margin-left: -9px;
margin-bottom: 0px;
margin-top: -9px;
z-index: 1;
position: fixed;
height: 150px;
width: 100%;
background-color: #fff517;
}
#wrapper {
margin-bottom: 100px;
float: none;
clear: both;
position: absolute;
margin-top: 170px;
left: 50%;
width: 854px;
margin-left: -422px;
}
#left-sidebar {
clear: none;
margin-left: auto;
margin-bottom: auto;
margin-right: 50px;
margin-top: auto;
min-height: 300px;
width: 200px;
float: left;
background-color: #39ff32;
position: relative;
}
#content {
clear: none;
float: left;
min-height: 300px;
width: 600px;
background-color: #ff1c23;
position: relative;
}
.push {
clear: both;
height: 200px;
}
#footer {
clear: both;
padding-top: 50px;
background-color: #9f49ff;
text-align: center;
width: 100%;
height: 50px;
z-index: 0;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<base href="http://www.footballpickpool.com/new_fpp/"/>
<link type="text/css" href="./resources/css/style.css" rel="stylesheet"/>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="left-sidebar">
</div>
<div id="content">
</div>
</div>
<div class="push"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/aUTqf/
Thanks in advance to anyone who can provide some insight.
Edit:
I now have it working as expected in every browser but IE. Issue was due to fixed positioning of a couple of elements. Now to figure out IE, code included below:
body, html {
background-position: 50% 80%;
background-repeat: no-repeat;
background-image: url(../images/background.jpg);
background-color: #d9d9d9;
height: 99%;
margin: 0px;
padding: 0px;
}
#header {
padding-top: 15px;
margin-left: auto;
margin-bottom: 45px;
margin-right: auto;
margin-top: 0px;
color: white;
position: fixed;
z-index: 99998;
left: 0;
top: 0;
height: 150px;
width: 100%;
background-color: #fff517;
}
#wrapper {
float: left;
clear: both;
position: relative;
left: 50%;
width: 854px;
margin-left: -422px;
padding-top: 200px;
padding-bottom: 150px;
}
#left-sidebar {
clear: none;
margin-left: auto;
margin-bottom: auto;
margin-right: 50px;
margin-top: auto;
min-height: 300px;
width: 200px;
float: left;
background-color: #39ff32;
position: relative;
}
#content {
min-height: 300px;
clear: none;
float: left;
width: 600px;
background-color: #ff1c23;
}
.push {
clear: both;
height: 100px;
background-color: #9f49ff;
}
#page {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
height: 100%;
min-height: 100%;
width: 100%;
z-index: 1;
}
#footer {
clear: both;
margin-top: auto;
margin-left: auto;
margin-bottom: auto;
margin-right: auto;
background-color: #9f49ff;
text-align: center;
width: 100%;
height: 50px;
z-index: 0;
}
I believe this is a true Sticky Footer as you wanted.
http://jsfiddle.net/PU8U3/
I had to remove a lot of stuff from your CSS. I tried to leave only the necessary to make it work. You should try to add what you need on top of this.
Watch out for the stylesheet link tag in your HTML, it's really hard to edit CSS using JSFiddle while the HTML is loading another.
You can add a padding bottom to the content with the size of the footer and you are good to go.
Related
I want to align the bottom of my mat icon and that of the img next to it. I've tried multiple things, and this is what it currently looks like:
Here's my HTML:
<div class="container">
<p class="triage"><mat-icon>assignment_ind</mat-icon></p>
<p class="O2"><img src="../../assets/med_O2.png"></p>
</div>
CSS:
.O2, .triage{
display: inline-block;
vertical-align: middle;
}
.container img {
width: 50px;
height: 50px;
}
.container mat-icon{
font-size: 60px;
width: 60px;
}
Use line-height:
.container
{
line-height: 60px; //or what ever height your container is
}
Can you push mat-icon down with a little bit of margin or padding?
.container mat-icon{
font-size: 60px;
width: 60px;
margin-top: 5px;
}
What about something like this?
<style>
.container {
position: relative;
width: 65px;
height: 100px;
}
p.triage {
background: blue;
width: 30px;
height: 40px;
position: absolute;
bottom: 0;
right: 0;
}
p.O2 {
width: 30px;
height: 20px;
background: red;
position: absolute;
bottom: 0;
left: 0;
}
</style>
<div class="container">
<p class="triage"></p>
<p class="O2"></p>
</div>
Ok I am trying to build a website design. What I need to do is have two colored background divs and then float a white box in front of them. I have used z-index 0 for the background blocks and then z-index 5 for the block I want to float on top. I have also used position: relative. Does anyone know why this doesn't work. Here is my code:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="page">
<div id="grey_block_left"></div>
<div id="purple_block_right"></div>
<div id="white_box_outer">
float on top
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
*
{
list-style: none;
text-decoration:none;
padding: 0;
margin: 0;
}
html
{
margin: 0 auto;
width: 100%;
min-width: 320px;
}
body
{
margin: 0;
padding: 0;
}
#page
{
width: 100%;
position: relative;
z-index: 0;
}
#grey_block_left
{
width: 40%;
background-color: #333333;
min-height: 700px;
float: left;
position: relative;
z-index: 0;
}
#purple_block_right
{
width: 60%;
background-color: #9966cc;
min-height: 700px;
float: left;
position: relative;
z-index: 0;
}
#footer
{
width: 100%;
background-color: #111111;
min-height: 250px;
float: left;
position: relative;
z-index: 0;
}
#white_box_outer
{
width: 70%;
min-height: 450px;
margin-left: 200px;
position: relative;
z-index: 5;
float: left;
background-color: #ccc;
}
#white_box_outer
{
width: 70%;
min-height: 450px;
margin-left: 200px;
position: absolute;
float: left;
background-color: #ccc;
}
Set your white_box position to absolute and then adjust it's height and width, according to your goals.
I try to add a language flags (like a images with links) in my wordpress custom theme.
Images work correctly, but their links did not work.
My code:
header.php
<div class='container'>
<div class="flags-holder">
<div class="flag">
<img src="http://example.com/imgs/en-english.png">
<img src="http://example.com/imgs/ru-ruskaq.png"></div>
</div>
Stylesheet.css
#top .flags-holder {
float: right !important;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 11px;
height: 20px;
position: relative;
padding: 0;
left: 10%;
z-index: 100;
}
#header .container{
z-index: 99;
padding-top: 4px;
padding-left: 73% !important;
}
.flag {
height: 20px;
float: right !important;
overflow: hidden;
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
right: 0;
top: -1px;
}
I have a layout frame of small widget with top navbar and bottom navbar. Inside that widget i have items and in one of them i have to put another layout(same as parent). This is small example of mine css problem, where footer in child layout is not in the bottom.
.body{
position: static;
width: 100%;
height: 100%;
}
.header{
position: absolute;
top: 0px;
}
.footer{
position: absolute;
bottom: 0px;
}
.main{
position: relative;
width: 100%;
height: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.item{
position: relative;
width: 100%;
}
.view{
height: 100%;
}
this dont get the height of height in parent widget, how can i fix that?
I manage to build the layout i want without any kind of positions, i removed all of them. I use:
display: table;
display: table-row;
for mine layout and it works perfectly. Here is the example of what i did. Below is general css of what i did.
.body{
height: 100%;
display: table;
width: 100%;
text-align: center;
}
.header{
display: table-row;
width: 100%;
height: 50px;
background-color: blue;
}
.footer{
display: table-row;
bottom: 0px;
width: 100%;
height: 50px;
background-color: grey;
}
.main{
display: table;
width: 100%;
height: 100%;
}
.item{
display: table-row;
width: 100%;
}
.fullExtend{
height: 100%;
}
html, body { height: 100%; }
Class body is container for widget, header and footer is for header and footer for each widget, main is the body of widget, item is part of main which can be widget and fullExtend is item which height get maximum space left in page.
Do you want to achieve something like this?
Edit: I refined your structure a bit. You want to achieve this?
HTML :
<div class="main-header">
Main Header
</div>
<div class="wrapper">
<div class="item item-1">
<div class="header">
Item 1 Header
</div>
<div class="item-content">
<div class="item item-2">
Item 2
</div>
</div>
<div class="footer">
Item 1 Footer
</div>
</div>
</div>
<div class="main-footer">
Main Footer
</div>
CSS:
html{
height: 100%;
}
body{
margin: 0;
padding: 0;
height: 100%;
}
.main-header{
position: absolute;
top: 0px;
background-color: blue;
width: 100%;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
}
.main-footer{
position: absolute;
bottom: 0px;
background-color: grey;
width: 100%;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
}
.wrapper{
position: relative;
padding: 50px 0;
box-sizing: border-box;
height: 100%;
}
.header{
position: absolute;
top: 0px;
width: 100%;
height: 50px;
background-color: darkblue;
color: white;
}
.footer{
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
background-color: darkgrey;
color: white;
}
.item{
position: relative;
width: 100%;
height: 100%;
}
.item-view{
height: 100%;
position: absolute;
width: 100%;
padding-top: 50px;
box-sizing: border-box;
}
.item-content{
position: relative;
top: 50px;
}
I have a conundrum: I need the darkest-gray bar you see on the bottom right (after opening the below code locally) spanning across as much space as the browser window will allow WITHOUT crossing over the light-gray section I have set up on the left. Here is my code:
<div class="timeline-section">
<div class="timeline-wrapper">
<div class="mini-timline"></div>
<div class="timeline"></div>
<div class="clearfix"></div>
</div>
</div>
CSS:
.clearfix { clear: both; }
.timeline-wrapper { position: relative; }
.timeline-section {
background: #3d3d3d;
bottom: 0px;
height: 276px;
left: 0px;
width: 100%;
position: absolute;
padding: 0px;}
.mini-timline {
background: #474747;
margin: 0px;
float: left;
height: 276px;
width: 500px;
display: inline-block;}
.timeline {
background: #232323;
height: 200px;
width: 60%;
float: left;
display: inline-block;
position: relative;}
One method is not to float the timeline element.
Just set a margin-left for the width of the mini-timeline:
.timeline {
background: #232323;
height: 200px;
margin-left:500px;
position: relative;
color:#FFF;
}
http://jsfiddle.net/rLzAM/1/
Try this:
.timeline {
background: #232323;
height: 200px;
width: 100%;
display: inline-block;
position: absolute;
}