I'm trying to make the footer stay at the bottom using CSS, - sticky footer:
.wrapper {
margin: 0 auto;
padding: 0 0 0 0;
width: 100%;
text-align: left;
background: #F5F5FF;
}
.page .footer {
left: 0;
width: 100%;
min-width: 300px;
position: fixed;
margin-top: -150px;
}
.tfoot {
background: #3E5C92;
color: #E0E0F6;
}
.smallfont {
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
And here's the HTML of the thing:
<div class="wrapper">My stuff</div>
<div class="footer">
<div class="tfoot" align="left" style="padding:6px">
<div class="smallfont" style="float:right">
About Extranet Changelog </div>
<div style="color:white">
<small>Copyright © 2009 Radon Systems | Shamil Nunhuck | <?php echo($product.' | '.$version.' | '.$build); ?>
</div></div></small></div>
But it's not sticking to the bottom, at all. What's wrong with it?
Try this method (its the only one I've found consistently works):
http://www.cssstickyfooter.com/
If you want for example .footer to stick to bottom try the following :
.footer { position:fixed; bottom:0; width:100%; height:110px;}
Of course i made the width and height up so change as you require.
Hope this helps!!
You do not have bottom: set.
Dup: HTML footer problem
Related
This question already has answers here:
Margin-Top push outer div down
(8 answers)
Closed 4 years ago.
So I was creating a page and put an 'h1' tag inside of a full height 'div' tag. Now when I went to add a bit of 'margin-top' to the h1 for some reason it created a white space where the background color should be.
Please help. What could be causing this?
Here is my code:
body {
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
}
#first-div{
height:100vh;
width:100%;
background-color:#E0EBE8;
}
#nav-bar {
background-color:#E0EBE8;
height:58px;
position:fixed;
top:0;
left:0;
width:100%;
}
.menu-link {
float:right;
text-decoration:none;
color:#008080;
font-size:115%;
margin-top:20px;
margin-right:107px;
}
.menu-link2 {
float:right;
text-decoration:none;
color:#008080;
font-size:115%;
margin-top:20px;
margin-right:52px;
}
#second-div {
height:100vh;
}
h1 {
margin-top:100px;
}
<div id="first-div">
<div id="nav-bar">
Contact
Work
About
</div>
<h1>This is my heading</h1>
</div>
<div id="second-div">
</div>
You have the h1's margin-top at 100px, which pushes it down 100 px from the top of the screen. The nav-bar's height is only 58 px, which leaves 42 px of room in between, which is the white space you don't want. Either change the nav-bar's height to 100px, or change the h1's margin-top to 58px.
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#first-div {
height: 100vh;
width: 100%;
background-color: #E0EBE8;
}
#nav-bar {
background-color: #E0EBE8;
height: 58px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.menu-link {
float: right;
text-decoration: none;
color: #008080;
font-size: 115%;
margin-top: 20px;
margin-right: 107px;
}
.menu-link2 {
float: right;
text-decoration: none;
color: #008080;
font-size: 115%;
margin-top: 20px;
margin-right: 52px;
}
#second-div {
height: 100vh;
}
h1 {
padding-top: 100px;
}
<div id="first-div">
<div id="nav-bar"> Contact Work About </div>
<h1>This is my heading</h1>
</div>
<div id="second-div"> </div>
I'm trying to keep my footer down no matter the size of the page. But it gets thrown about when about div encroaches. I want it to display over the about content but for the about content to be scrollable it's too big to display.
Here's the code
fiddle
.footer {
background-color:#FFF;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width:100%;
min-height: 100%;
margin-bottom: -140px;
}
You need to clear the float. Add clear:both; to the .footer.
(function() {
var img = document.getElementById('container').firstChild;
img.onload = function() {
if (img.height > img.width) {
img.height = '100%';
img.width = 'auto';
}
};
}());
* {
margin: 0;
}
html,
body {
height: 100%;
}
.footer,
{
height: 140px;
display: block;
}
p {
font-family: HindRegular;
font-size: 13px;
font-weight: normal;
display: block;
margin-top: 1.5em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
.article {
float: left;
font-family: HindRegular;
width: 21%;
padding-right: 4%;
color: #999;
}
.article-right {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 4%;
color: #999;
}
.article-centre {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 2%;
padding-right: 2%;
color: #999;
}
.blurb {
font-family: HindMedium;
font-size: 24px;
padding-bottom: 100px;
color: #999;
}
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width: 100%;
min-height: 100%;
/* equal to footer height */
margin-bottom: -140px;
}
.heading {
font-family: HindMedium;
font-size: 24px;
color: #666;
margin-top: 1em;
}
.copyright {
float: left;
}
.contact {
float: right;
font-family: HindRegular;
color: #999;
}
#container {
width: 100%;
}
#container img {
width: 100%;
}
h8 {
font-family: HindRegular;
color: #999;
padding-right: 5px;
font-style: normal;
}
.footer {
clear: both;
background-color: #FFF;
height: 120px;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
}
a {
border-bottom: 1px solid #219edf;
padding: 0;
margin: 0 0 2px 0;
clear: both;
color: #666;
text-decoration: none;
font-weight: normal;
outline: none;
transition: all .15s ease;
}
.services {
width: 100%;
}
a:hover {
text-decoration: none;
color: #999;
border-bottom: 1px solid #999;
}
#details {
color: #666
}
#header {
color: #999;
}
<div class="about">
<div class="blurb">Stunning Imagery and resourceful imaging
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" />
</div>
<div class="heading">Architectural Photography
</div>
<p>Since 2011 Nathaniel has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate
sites with little more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number and
the name of a contractor called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
</p>
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Aerial_drone_photography-.jpg" alt="Aerial Photography with UAV drone" />
</div>
<div class="heading"> Aerial Services
</div>
<p>Large range of services utilizing our fleet of custom built UAS (Unmanned Aerial Systems - AKA drones)</p>
<p>Registered CAA pilot with commercial flight permissons</p>
<p>Up to High resolution stills at 42mp and rich 4k full frame video</p>
<p>Photogrametry - Developing accurately positioned 3D site models up to a 10cm level accuracy</p>
<p>Agronomy - Crop analysis, multispectral imaging</p>
<p> </p>
</div>
<div class="article-centre">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/blank.jpg" alt="Verified View image of existing site with proposed building outline." />
</div>
<div class="heading">Verified Views
</div>
<p>We provide AVR's (Accurate Visual Representations) aka verified views to back up your project proposals with accurate siting in the current landscape.</p>
<p>We don't outsource the photography or site survey whole process is in house</p>
<p>Levels of representation from AVR0 - outlining of proposed project to AVR3 - description of architectural form and materials.</p>
</div>
<div class="article-right">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Rhizome_logo_square.jpg" alt="Architectural Services by Rhizome" />
</div>
<div class="heading">Rhizome
</div>
<P>Company started in London 2017 to explore and provide bespoke services to small and mid sized architectural firms and developers utilsing emerging technologies in architectural and related fields.</P>
<P>Comming Soon</P>
</div>
<br style="clear: left;" />
</div>
<footer class="footer">
<div class="article"><span id="header">Contact Details</span>
</div>
<div class="article">
<span id="header">Address</span>
<br /><span id="details">Nathaniel McMahon Photography<br />
Maynards Farmhouse<br />
A21, Lamberhurst QTR<br />
Kent<br />
TN3 8AL</span>
</div>
<div class="article-centre">
<span id="header">Mobile</span> <span>+44 (0)7377673765
</span><br/>
<span id="header">Email </span>
nathaniel.mcmahon#gmail.com
</div>
<div class="article-right"> Website and all images <br /><span id="details">© 2017 Nathaniel McMahon Photography</span>
</div>
</footer>
Remove these from your .about class. You should practice some with margin. It doesn't work the way you're trying to use it.
min-height: 100%;
margin-bottom: -140px;
Add clear:both; to your footer declaration.
Also change your body style from height to min-height, so that your body can be larger than the browser.
You can use overflow: hidden on .about and .footer so the floats will stay contained within those containers. You don't need the negative margin on the .about. If you are trying to make the footer stay at the bottom of the page even when the content is very little, you could try positioning the footer absolutely. Here's an example below. You'll need to wrap everything in .wrapper or whatever name you want to use.
.wrapper { min-height: 100%; position: relative; }
.article { overflow: hidden; }
.footer { overflow: hidden; position: absolute; bottom: 0; }
With less content, footer is at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/1/
With more content, footer is still at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/3/
If you want elements to stick out of the .article and .footer containers, or just another option, here's an alternative solution to clearing floats:
You could remove floats on your article and footer containers, but use display: inline-block; with vertical-align: top; instead. You'll need * { box-sizing: border-box; } or change your padding into margin.
https://jsfiddle.net/suefeng/u4coohpp/4/
Also added this to the footer so the email address wouldn't run into the next column:
.footer a[href*="mailto"] {
word-break: break-all;
}
Here's an example of having a fixed footer:
https://jsfiddle.net/suefeng/gv7Lg3e0/1/
.footer {
position: fixed;
bottom: 0;
}
If you are simply trying to pin an element to stay at the bottom of the page and have content scroll under it. You should use position:fixed.
If you update your footer content like so:
.footer {
background-color: #FFF;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
overflow: hidden;
position: fixed;
left:0;
right:0;
bottom:0;
clear:both;
}
The footer will pin to the bottom. You will also need a spacer after your footer to ensure your scroll bar is sufficient to scroll all content into view.
HTML:
<div class='footer-spacer'></div>
CSS:
.footer-spacer {
height: 160px;
}
Remove these from your .about class. Negative margins will cause odd behavior when it moves an element off page.
min-height: 100%;
margin-bottom: -140px;
so I have this little beginning of a site and I want the top menu to stay on top of anything else. I used position:fixed and now it does stay on top of everything except for one div that display a logo... I tried using z-index but that didn't help. How do I force that header to stay on top without using Js if possible...
The "blackBar" passes on top of the heading but it's the only this that does...
<body>
<div id="pageBloc">
<header>
<nav>
<ul>
<li>Stuff1</li>
<li>Stuff2</li>
<li>Stuff3</li>
<li>Stuff4</li>
<li>Stuff5</li>
</ul>
</nav>
</header>
<div id="topBloc">
<div id="blackBar">
<p id="logo"><img src="Images/logoSmall.png" alt="logo"</p>
<h1 id="titrePrincipal">MyTitle</h1>
<h2 id="soustitrePrincipal">SubTitle/h2>
</div>
</div>
<section id="temporatySection">
</section>
</div>
</body>
Here's the CSS
body, html
{
margin: 0px;
padding: 0px;
height:100%;
}
#pageBloc
{
height:100%;
}
/*Header*/
header
{
text-align:center;
background-color: #26292E;
height: 40px;
width: 100%;
position:fixed;
}
nav ul, nav li
{
margin-top:5px;
text-transform:uppercase;
display: inline-block;
list-style-type:none;
}
#topBloc
{
background: url('Images/backgroundBloc12.jpg') fixed center;
background-size:cover;
width: 100%;
height: 100%;
}
#blackBar
{
background: rgba(38,41,46,0.80);
position:absolute;
bottom:15%;
width: 100%;
}
#logo
{
padding: 3px;
text-align: center;
}
#titrePrincipal
{
display:none;
text-align:center;
color: white;
}
#soustitrePrincipal
{
text-align: center;
color:black;
}
#temporarySection
{
height: 1000px;
}
Add position: relative; z-index: -1; to #logo.
Then, make sure that you add z-index: -2 to #blackbar.
See here: http://jsfiddle.net/davidpauljunior/gGMzD/1/
Instead of position fixed, you can try
position: absolute
top: 0
left: 0
right: 0
z-index: 100
but if you must use position fixed, you can disregard this and see the answer above.
I have a to most probably simple problem.
My page has a background color and contains a container, then a contentcontainer to put the page in the middle. Now this content container has a different background color, but a small space where we see the original page background color is visible at the top and bottom.
The CSS file is like this:
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #E0EBED;
}
#container {
width: 100%;
}
#contentcontainer {
background-color: #FFFFFF;
width: 1000px;
margin: 0 auto;
}
The body looks like this:
<div id="container">
<div id="contentcontainer">
<p>Some content</p>
</div>
</div>
What do I have to to to make this small space disappear.
I have already tried to add 0 top padding to the container div and body.
After a few answers I have discovered that margin: 0; the body css takes out the space at the top. I still have the same kind of space at the bottom though.
To show people what I mean:
NOW THIS IS THE FIX:
CSS:
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #E0EBED;
margin: 0;
}
#container {
width: 100%;
}
#contentcontainer {
background-color: #FFFFFF;
width: 1000px;
height: 100%;
margin: 0 auto;
}
I added margin: 0; to body and height: 100%; to content container. If you have the same problem do not forget to add the margin: 0; to the body as it will not work without that.
Thanks to all that answered this question and helped me solve this!
Add this to your CSS:
* {
margin: 0;
padding: 0; }
body has padding by default. Make it 0px by -
body{padding:0px;}
I am making a basic template for a website. It has div containers of 1 header, a main menu listed horizontally below the header, the main content which is a google maps iframe (variable width) and a sidebar (absolute width, floated right) and a footer.
I am having some trouble with the height of the main content. I would like the iframe and the sidebar to have equal height whilst fitting to the page and leaving a margin for the footer but the main content always sets itself to min-height rather than stretching to the page.
HTML
<body>
<div id="wrapper">
<div id="header"><img src="images/logo.png" width="360" height="127" /> </div><!--header-->
<div id="menu">
<ul><li>Home</li>
<li>About</li>
<li>Network</li>
<li>Help</li>
<li>Contact</li></ul>
</div><!--mrnu-->
<div id="content">
<div id="sidebar">
Sidebar
</div><!--sidebar-->
<div id="main">
<iframe id="map" width="100%" height="auto" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?q=52.988337,3.120117&num=1&ie=UTF8&t=m&z=6&ll=51.206883,7.756348&output=embed"></iframe>
</div><!--main-->
<div class="clear"></div>
</div><!--content-->
<div class="push"></div><!--push-->
<div id="footer" class="footer">
</div><!--footer-->
</div><!--wrapper-->
</body>
</html>
CSS
body {
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-size: 75.00%;
color: #fff;
background: url(images/bg.png);
}
a{
color: #090;
text-decoration:none;
}
a:focus, a:hover, a:active {
color: #FFF;
text-decoration: underline;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
* {
margin: 0;
}
html, body {
height: 100%;
}
/* div tags */
#wrapper {
width: auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#header {
position: relative;
width: auto;
height: auto;
background-color: #090;
}
#menu {
width: auto;
height: auto;
border: 2px solid #000;
font-size: 18px;
}
#menu ul {
padding: 0px;
margin: 0px;
text-align: center;
}
#menu li {
display: inline;
padding: 50px;
}
#content {
width: auto;
height: 100%;
}
#main {
width: auto;
margin-right: 125px;
}
#map {
width: 100%;
height: auto;
}
#sidebar {
width: 125px;
height: auto;
float: right;
text-align: center;
background-color: #FC0;
}
#footer {
width: auto;
height: 125px;
background-color:#CC0;
}
/* classes */
.clear {
clear: both;
}
.footer .push {
height:125px;
}
Note: There may be 1 or 2 unused lines of code that I haven't spotted when I've been playing around with it so if anything seems out of place then it probably is.
I have seen solutions to this problem with fixed width containers, but I think the problem lies in my use of the float function. I have read that positioning needs to be absolute for this to work properly, however using float is the only way I have been able to find that allows the map to fill the space using variable width.
It could be something as simple as being incompatible with the browsers I am testing on but I'm not sure.
Thanks in advance and sorry if this post is a bit messy. I'm sure I will learn to keep clean soon enough ;D
Try these style changes-:
#map {
width: 100%;
// height: auto;
}
#content {
width: auto;
//height: 100%;
height: auto;
}
Setting #content to height:auto pushes the #footer div to meet the #content div.
and in <iframe> set height to 100% (or 80% to show footer). It still leaves the issue of the map div now pushing the footer to below screen height. To deal with that, possibly set an absolute height for the iframe, or use an alternative to iframe.