I have a site I'm currently working on which requires a sticky footer as some of the pages content is smaller then the rest.
My Website
I have tried many resources/tutorials trying to get a sticky footer working.
Tutorial Followed
I have attempted to implement this tutorial and below is my code which goes with it. I'm hoping someone
Could anybody possibly suggest CSS changes to my code to implement this feature.
<body>
<div id="wrapper">
<div id="header-wrap">
<div id="header"></div>
<div id="home-header"></div>
<div class="push"></div>
</div>
<div id="footer-wrap">
</div>
</div>
</body>
CSS
#footer-wrap
{
background: url("images/footer.jpg") repeat-x scroll center bottom transparent;
color: rgb(117, 139, 141);
height: 462px;
position: relative;
width: 100%;
}
#header-wrap
{
clear: both;
min-height: 100%;
margin-bottom: -462px;
}
#header-wrap:after
{
content:"";
display:block;
height:462px;
}
Not working for me. Need Help!
Also 'push' is not in use. Use it maybe?
EDIT
body {
height: 100%;
margin:0px
}
html
{
height: 100%;
margin: 0px;
}
#wrapper
{
min-height: auto !important;
min-height: 100%;
}
UPD
<style type="text/css">
#footer-wrap
{
height: 462px;
position: relative;
width: 100%;
}
html, body {
height: 100%;
margin:0px;
background: #eee;
margin-bottom: -462px;
}
#wrapper
{
min-height: auto !important;
min-height: 100%;
border: 1px solid red;
margin-bottom: -462px;
}
#wrapper:after
{
content:"";
display:block;
height:462px;
}
</style>
HTML
<div id="wrapper">
<div id="header-wrap">
<div id="header"></div>
<div id="home-header"></div>
<div id="page-wrap"></div>
</div>
</div>
<div id="footer-wrap">
</div>
You can do this by css trick
css
body, html{
padding:0;
margin:0;
height:100%;
}
.wrapper{
min-height:100%;
position:relative;
}
.container{
width:960px;
margin:0 auto;
padding-bottom:100px;
}
.header{
height:100px;
background-color:#066;
}
.footer{
position:absolute;
bottom:0;
height:100px;
background-color:#006;
width:100%;
}
html
<div class="wrapper">
<div class="container">
<div class="header">
Header
</div>
<div style=" text-align:center; padding-top:25px;">
Place you content here as much as you like
</div>
</div>
<div class="footer">
Footer
</div>
</div>
working js Fiddle File
This works.
CSS
* {
margin: 0;
}
html, body, #wrapper {
height: 100%;
}
.header-wrap {
min-height: 100%;
margin-bottom: -462px;
}
.header-wrap:after {
content: "";
display: block;
}
#footer-wrap, .header-wrap:after {
height: 462px;
}
#footer-wrap {
background: orange;
}
HTML
<div id="wrapper">
<div class="header-wrap">
<div id="header">#header</div>
<div id="home-header">#home-header</div>
</div>
<footer id="footer-wrap">
#footer-wrap
</footer>
</div>
Related
So essentially I am writing a game in javascript. I have a canvas on the left, a canvas in the middle, a textarea topright, and a canvas bottom right. But I can't seem to get the right CSS code to figure out this layout like the picture. I want the middle to take up about 50-60% of the middle of the page, and the left and right columns taking the rest of the space. Would be nice if it auto resized with browser window. Any help would be appreciated.
Set a container to hold all the elements and then make smaller containers inside. Target each with CSS and set its properties.
Here I set a general CSS class .generalStyles just to simplify the code.
You would use something like this: (run the snippet)
.generalStyles
{
position:relative;
float:left;
background-color:#000;
border-radius:4px;
box-sizing:border-box;
color:#f00;
height:100px;
padding:5px;
text-align:center;
}
.container
{
width:100%;
background-color:#FFF;
}
.leftPanel
{
width:24%;
margin:0 1% 0 0;
}
.rightPanel
{
width:24%;
margin:0 0 0 1%;
background-color:#FFF;
padding:0;
}
.middlePanel
{
width:50%;
margin:0;
}
.topPanel
{
width:100%;
margin:0;
height:49.5%;
}
.bottomPanel
{
width:100%;
margin:1% 0 0 0;
height:49.5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div class="container generalStyles">
<div class="leftPanel generalStyles">left stuff goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="middlePanel generalStyles">middle goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="rightPanel generalStyles">
<div class="topPanel generalStyles">top stuff<br/>and more here</div>
<div class="bottomPanel generalStyles">bottom stuff<br/>and more here</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h2 {
text-align:center;
font-family:arial;
color:red;
font-weight:normal;
}
.left {
background-color: #000;
border-radius:10px;
float: left;
width: 20%;
padding: 10px;
margin:10px;
height: 300px;
}
.middle {
background-color: #000;
border-radius:10px;
float: left;
width: 60%;
padding: 10px;
margin:10px;
height: 300px;
}
.right {
float: left;
width: 20%;
margin: 10px;
height: 300px;
position: relative;
top: 0;
}
.top {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
}
.bottom {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.row {
box-sizing:border-box;
display: flex;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="left">
<h2>left</h2>
</div>
<div class="middle">
<h2>middle</h2>
</div>
<div class="right">
<div class="top">
<h2>top right</h2>
</div>
<div class="bottom">
<h2>bottom right</h2>
</div>
</div>
</div>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right">
<div class="rightDiv"></div>
<div class="rightDiv"></div>
</div>
</div
and css
.container{display:block;width:100%}.left,.middle,.right{width:100px;display:inline-block}.left{border:1px solid red;height:100px}.middle{border:1px solid green;height:100px}.rightDiv{border:1px solid #ff0;height:40px;margin:10px 0}
Fiddle
I've been trying to figure out what my right div is floating out of position.
.header{
background:red;
height:100px;
width:100%;
}
.left{
background:white;
float:left;
height:800px;
width: 200px;
}
.main{
background:yellow;
height: 800px;
width: 600px;
overflow: hidden;
}
.right{
background:white;
float: right;
height:800px;
width: 200px;
overflow: hidden;
}
.footer{
background:red;
height: 100px;
width:100%;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<title>Layout</title>
<body>
<div class="header"></div>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
<div class="footer"></div>
</body>
</html>
Any pointers? I know this is going to be deceptively simple but I've drawn a blank
div{
border: 1px solid #000000;
margin:3px;
}
.header{
background:red;
height:100px;
width:100%;
}
.left{
background:white;
float:left;
height:800px;
width: 200px;
}
.main{
background:yellow;
height: 800px;
width: auto;
overflow: hidden;
}
.right{
background:white;
float: right;
height:800px;
width: 200px;
overflow: hidden;
}
.footer{
background:red;
height: 100px;
width:100%;
}
<div class="header">header</div>
<div style="clear:both;"></div>
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div style="clear:both;"></div>
<div class="footer">footer</div>
This is the correct way :
first put the floating elements (left - right) than the non floating one (main)
Also make shure you clear after float ("clear:both")
ps I give thhe main "with:auto" but is not necessary... only more compatible
<div class="header">header</div>
<div style="clear:both;"></div>
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div style="clear:both;"></div>
<div class="footer">footer</div>
Semantically, you probably should go with the main content of the page first, then the supporting content. This template also will shrink the content area based on the space available, although that can easily be adjusted with the CSS if you wanted a fixed layout by setting a specific width on the .content element.
<div class="header"></div>
<div class="content">
<div class="main">
<div class="main-inner"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
Then for the CSS, you use something like this:
.header, .footer, .content {
clear: both;
}
.header, .footer {
height: 100px;
}
.content {
width: 100%;
max-width: 1000px; /* Keeps the site from growing beyond 1000px */
margin: 0 auto; /* Centers the content area */
}
.main, .left, .right {
float: left;
}
.main {
width: 100%;
}
.main-inner {
margin: 0 200px;
}
.left, .right {
width: 200px;
}
.left {
margin-left: -100%; /* Puts the left sidebar to the top left of the .content element */
}
.right {
margin-left: -200px; /* Puts the right sidebar on the right edge of the .content element */
}
/* Colors and Heights so you can see things */
.main-inner, .left, .right { min-height:600px; }
.header, .footer { background-color: red; }
.main-inner { background-color: yellow; }
http://jsfiddle.net/j1rLfmky/
I want to leave out the footer of the height of the page such as Google Chrome does when you download a file. My page looks like this:
And I want to keep out of scrolling just like:
This is the code of my footer:
<footer class="tr-emulate">
<div class="float-left" style="margin-left: 5px; padding-top: 8px;">
<button class="k-button" onclick="javascript:document.getElementById('logoutForm').submit();">Cerrar sesión: #User.Identity.Name</button>
</div>
<div class="float-right" style="margin-right: 5px; padding-top: 12px;">© #DateTime.Now.Year - DirecTV </div>
</footer>
and this is the CSS style of the tag:
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
text-align: left;
width: 100%;
bottom: 0;
position: fixed;
height: 37px;
}
How can I do that?
This should get you on the right path:
FIDDLE
HTML:
<div id="wrap">
<div id="content"></div>
</div>
<footer></footer>
CSS:
body, html{
width:100%;
height:100%;
margin:0;
padding:0;
}
#wrap{
height:90%;
width:100%;
overflow:auto;
}
#content{
height:300%;
width:100%;
background:green;
}
footer{
width:100%;
height:10%;
position:fixed;
bottom:0;
left:0;
background:red;
}
I would put the site name in the middle of this header but unfortunately I can not do it, I've tried many combinations but I just can not. I'll post the source
CSS
.header {
background-color:#00B9ED;
height:50px;
border-bottom:0px;
padding-left:auto;
padding-right:auto;
width:100%;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:1000px;
padding-top:0px;
padding-bottom:0px;
}
.logo {
width:150px;
margin: 0 auto;
}
.logo img {
width:150px;
height:50px;
}
.logo:hover {
height:50px;
background-color:#A9E2F3;
cursor:pointer;
}
HTML
<div class="header">
<div id="wrapper">
<div class="logo">
<img src="image.png" />
</div>
</div>
</div>
have no idea how can I do? Thanks
Use Below Code
<style>
.header {
background-color:#00B9ED;
height:50px;
border-bottom:0px;
padding-left:auto;
padding-right:auto;
width:100%;
}
#wrapper {
margin-left:auto;
margim-right:auto;
padding-top:0px;
padding-bottom:0px;
}
.logo {
text-align: center;
}
.logo img {
width:150px;
height:50px;
}
.logo:hover {
height:50px;
background-color:#A9E2F3;
cursor:pointer;
}
</style>
<div class="header">
<div id="wrapper">
<div class="logo">
<a>Bhavin<img src="image.png"></a>
</div>
</div>
</div>
Always try to code with standards. You can use text-align but it is for align paragraph or other elements with text. Insted align I would recommend to use margin:0 auto;width:150px;.
Here you got jsFiddle
try this
CSS
#wrapper {
margin: 0 auto;
padding-bottom: 0;
padding-top: 0;
width: 1000px;
}
.logo {
margin: 0 auto;
width: 150px;
}
HTML
<div class="header">
<div id="wrapper">
<div class="logo">
logo<img src="image.png" alt="LOGO"/>
</div>
</div>
</div>
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.