I want a header,body and footer.I have coded it.when I alter the codes the footer either sits below the body when i give it like this
HTML CODE:
<div id="body" style="background-image:url(img/bg.png);" class="body">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
<p style="desc p"></p>
</div>
</div>
<div id="footer" style="background-image:url(img/bottom_bar.png);" class="footer">
<div><h6 class="footer h6">2011-FOOOTER</h6><img src="img/info.png" alt="" /></div>
</div>
CSS CODE:
.body
{
float:left; float:left; width:100%; height:100%; min-height: 100%; overflow-y: scroll;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px;
}
.desc p
{
margin-top:0;
}
CSS CODE of footer:
.footer
{
float:left; width:100%; line-font-size:15px; padding:0px; bottom:0px; height:25px; font-size:18px;
}
when I code it as below,the footer sits on the body and when you go down you can see the text below the footer
.footer
{
float:left; width:100%; position:absolute; line-font-size:15px; padding:0px; bottom:0px; height:25px; font-size:18px;
}
I want the footer to be fixed to the bottom of the screen and want the text to scroll without the scroll bar.
Could someone suggest what is the mistake I have done and where?
Try this styles for which to see scrollbar just remove overflow:hidden in body
html,
body {
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:fixed;
bottom:0;
left:0;
}
Sure you will get footer pushed under body with 100% height of body, with no space for footer to stay in your view, you need to solve it, anyway this question is so common, your words maybe not helped you, simply you need to search about "Sticky Footer" a lot of questions answered here or simply with magic of Google you can see :
http://ryanfait.com/sticky-footer/
and http://www.cssstickyfooter.com/
And learn about it.
Good luck.
in the footer class
Instead of
position:absolute;
use
position:fixed;
this should work
Related
EDIT
I corrected a typo and updated the JSFiddle and this post to reflect the change. The Headline should be taking up 100% height and it isn't. Still looking for thoughts.
This is looking just as I want it on desktop. I can't figure out why on mobile it won't take up 100% of the height and stack on top of each other. The Headline also loses the color background. Here's the JSFiddle
HTML
<div class="about-header">
<h2>Headline</h2>
</div>
<div class="about-section">
<div class="about-text">
<p>The first chunk of text to let users know they gotta read a
little bit. If they want. It's not mandatory or anything.</p>
<p>The second group of text, a nice chunk of descriptive text that
explains some more about this website. It really hopes you can help
me troubleshoot this problem that I am facing.</p>
<p>Another grouping of text goes right in this little section here
that should go on for a while.</p>
</div><!-- END ABOUT TEXT -->
</div> <!-- END ABOUT SECTION-->
</section>
</div><!-- END CONTAINER -->
CSS
*{
margin:0;
padding:0;
}
html{
font-size:62.5%;
}
html,
body{
height:100%;
background-color:#FFF;
color:#000;
font-family:"Arial", "Helvetica", sans-serif;
font-size:12px;
font-size:1.2rem;
}
.container{
width:100%;
height:100%;
}
.container *{
box-sizing:border-box;
}
.row{
min-width:85%;
margin:0 auto;
}
.row:before,
.row:after{
content:"";
display:table;
clear:both;
}
#about{
height:100%;
}
.about-header{
width:100%;
height:100%;
background-color:lightblue;
position:relative;
}
.about-header h2{
display:table-cell;
vertical-align:middle;
text-align:center;
text-transform:uppercase;
}
.about-section p{
font-size:1rem;
padding-left:1.2rem;
padding-right:3rem;
padding-bottom:1.5rem;
}
.about-text{
display:table-cell;
vertical-align:middle;
}
.about-section{
width:100%;
height:100%;
position:relative;
}
/**** MEDIA QUERY****/
#media all and (min-width:500px){
.about-section{
width:50%;
height:100%;
background-color:#FFF;
left:50%;
display:table;
position:absolute;
}
.about-header{
width:50%;
height:100%;
background-color:lightblue;
right:50%;
display:table;
position:absolute;
}
}
You have a typo.
.about-head{
width:100%;
height:100%;
background-color:lightblue;
position:relative;
}
Should be:
.about-header {
width:100%;
height:100%;
background-color:lightblue;
position:relative;
}
For some reason my footer isn't moving along to the bottom of the content as it always has and I've been over my code back and forth and can't figure out the problem. I used both html and css validators and they saw no errors in my coding. I figured maybe I'm missing a quote or semi colon somewhere but I can't figure out what's causing the problem.
Here's a fiddle to show what's going on https://jsfiddle.net/Optiq/n6xmhL2j/1/
here's the HTML
<body>
<div id="front_page" class="page">
<header>WELCOME SLIDESHOW</header>
<div id="intro_links">
<a class="nav_link" href="#">New Artists</a>
<a class="nav_link" href="#">New Designs</a>
<a class="nav_link" href="#">New Garments</a>
<a class="nav_link" href="#">How it Works</a>
</div>
<div id="new_artists" class="title_01">New Artists</div>
<div class="new_artist_pane">
<div class="art_pane01">
</div>
<div class="art_pane01">
</div>
<div class="art_pane01">
</div>
</div>
</div><!--front_page-->
<footer>footer</footer>
</body>
Here's the CSS
#charset "utf-8";
/* CSS Document */
body{
margin:0;
padding:0;
height:auto;
width:100%;
display:block;
/*background-color:#36F;*/
}
header{
width:100%;
height:444px;
background-color:#999;
color:#fff;
text-align:center;
display:block;
}
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
}
.page{
width:100%;
height:auto;
margin-bottom:4%;
display:block;
}
#intro_links{
width:88%;
overflow:auto;
margin:auto;
display:block;
}
.nav_link{
width:23%;
height:137px;
float:left;
text-align:center;
text-decoration:none;
margin:4% 0 4% 2%;
display:block;
background-color:#03C;
color:#fff;
}
.title_01{
width:44%;
height:44px;
background-color:#666;
font-size:29pt;
color:#fff;
display:block;
float:left;
clear:both;
}
.new_artist_pane{
width:66%;
height:auto;
border:solid 1px #333;
float:left;
margin:4% 0 0 2%;
display:block;
}
.art_pane01{
width:100%;
height:333px;
float:left;
border:solid 1px #CCC;
margin-bottom:4%;
display:block;
}
Such cases happen when you have elements with float
Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.
add this right before closing the div :
<div style="clear:both;"></div>
</div><!--front_page-->
<footer>footer</footer>
JS Fiddle
Another- and better since we don't have to add extra markup to the page - way to do it is to add .clearFix class to the parent container div which its closing tag </div> is right before the footer, to do so change this:
<div id="front_page" class="page clearfix">
to this:
<div id="front_page" class="page clearfix">
and put this in your css:
.clearfix:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
or :before and :after:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
Here's a JS Fiddle 2 showing the above technique
more details:
https://css-tricks.com/the-how-and-why-of-clearing-floats/
http://www.positioniseverything.net/easyclearing.html
DEMO
Probably you've given float:left to every possible element and that's what disturbing it. Just add it to footer too as below:
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
float:left;//here
}
The simplest way and most succinct way to answer what you need is to just add the clear: both to the CSS.
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
clear: both; //add this here
}
There is 3 ways to do that.
FIRST.
add float:left; to the footer.
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
float:left; // add this
}
SECOND.
set display of the footer inline:block or inline-table
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:inline-block; // or display:inline-table;
}
THIRD.
add clear:both; to the footer.
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
clear:both; // add this
}
I have a similar issue to White space appears below sticky footer, only in PHP and have tried various solutions similar to Footer position issue - CSS
My footer was centered below my content but when this content was too short there was a lot of white space. I amended my CSS to move the footer to the bottom of the page unless the content was longer but it now positions the footer over the content and to the left whereas I want it center and at the bottom.
The page also looks different between IE8 and Chrome.
My PHP page results in the following HTML:
<html><head><link rel="stylesheet" type="text/css" href="stylesheet.css"></head>
<body><div id="container"><div id="header"><p>Text</p></div>
<div id="navbar"><ul><li>1</li><li>2</li><li>3</li></ul></div>
<div id="content"><p>test</p></div><br />
<div id="footer"><hr><p>text</p>
<p>Copyright © text</p></div>
</body>
</html>
and the CSS:
body {
font-size:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:1.075em;
background-image:url(images/gradient.jpg);
background-repeat:repeat-x;
margin:0;
padding:0;
height: 100%;
}
#container {
font-family:Arial, Helvetica, sans-serif;
font-size:1.075em;
min-height:100%;
position:relative;
height:100%;
}
#content {
margin-left:200px;
margin-right:100px;
padding:18px;
padding-bottom:128;
}
#footer {
clear:both;
margin-left:auto;
margin-right:auto;
text-align:center;
position:absolute;
bottom:0;
height:128px;
width:100%;
}
#navbar {
position:fixed;
float:left;
width:180px;
margin:0;
padding:6px;
}
#navbar ul {
margin:0;
padding:0;
list-style:none;
}
#navbar li {
margin:0;
padding:1px;
display:block;
list-style:none;
font-family:"Stencil", Helvetica, sans-serif;
text-align:center;
}
Set
#container {min-height:400px;}
and your problem should be fixed.
UPDATE
After doing some testing and localhost modifications I have found out what I need:
The website must not be scrollable, only the content area.
When zooming the sidebar height should stay consistently to the bottom of the page.
The header must also zoom in and out but remain full width
Fiddle:
http://jsfiddle.net/dkx2q/2/
Something like this maybe:
CSS
body{
background-color:rgb(0,0,0);
}
#container{
display:block;
width:100%;
height:100%;
}
#fullScreenImage{
float:left;
width:25%;
height:100%;
background-color:rgb(124,197,118);
position:relative;
}
#content{
float:left;
width:75%;
height:100%;
}
#header{
display:block;
height:15%;
background-color:rgb(94,142,178);
position:relative;
}
#sidebar{
float:left;
height:85%;
width:20%;
background-color:rgb(162,94,179);
position:relative;
}
#contentArea{
float:left;
width:80%;
height:85%;
background-color:rgb(255,255,255);
position:relative;
}
span{
position:absolute;
top:50%;
width:100%;
text-transform:uppercase;
font-weight:bold;
font-family:Helvetica, 'Helvetica Neue', 'Arial Block', Arial;
font-size:9em;
text-align:center;
}
#header span{
font-size:7em;
top:40%;
}
HTML
<body>
<div id='container'>
<div id='fullScreenImage'><span>Full Screen Image</span>
</div>
<div id='content'>
<div id='header'><span>Header</span></div>
<div id='sidebar'>
<span>Sidebar</span>
</div>
<div id='contentArea'><span>Content Area</span></div>
</div>
</div>
</body>
My code is viewable at http://jsfiddle.net/ATbA5/2/ code will also be at the end of this post
I am trying to make content-wrapper 100% height however for it to be centered. I have looked at other theards on stackoverflow and Can't find a solution. Also A fixed footer at the end of the page not the bottom of the broswer window
HTML
<head>
<link rel="stylesheet" type="text/css" href="primary-resources/css/main-styles.css"/>
</head>
<body>
<div class="content-wrapper">
<!-- Header -->
<div class="header">
<div class="threetwentyleft">
<img src="primary-resources/imgs/header-logo.png" />
</div>
<div class="sixfortyright">
<div class="gameAdBanner">
<img src="game-resources/gameone/imgs/banner.png"/>
</div>
</div>
</div>
<!-- Content -->
<div class="gameLeft"></div>
<div class="gameRight"></div>
</div>
</body>
</html>
CSS
body ,html {
background-color:#000000;
height:100%;
top:0px;
bottom:0px;
clear:both;
padding:0px;
margin:0px;
}
.content-wrapper {
margin:auto;
background-color:#ffffff;
width:960px;
padding:0px;
bottom:0;px;
top:0px;
margin:auto;
box-sizing:border-box;
height:100%;
box-sizing:border-box;
clear:both;
box-sizing:border-box;
}
.header {
width:100%;
}
.threetwentyleft {
width:320px;
float:left;
padding:2px;
}
.threetwentyleft img{
width:320px;
padding:2px;
border:0px;
}
.sixfortyright {
width:630px;
float:right;
height:130px;
}
.gameAdBanner {
width:610px;
margin-top:2px;
margin-left:auto;
margin-right:auto;
}
.center {
margin-left:auto;
margin-right:auto;
}
.gameLeft {
width:700px;
padding:5px;
float:left;
}
.gameRight {
width:260px;
background-color:#CCC;
float:right;
padding:5px;
height:100%;
margin-right:3px;
}
.footer {
width:960px;
background-color:#FC6;
bottom:0px;
height:25px;
position:absolute;
}
Sounds like you want normal html behaviour, no need for any css, just add a div, or any block element after the content.