I'm trying to move the footer down 50px to go outta screen,
but the negative margin doesn't work (nothing is moving) and I'm not quite sure why...
footer {
background: #111;
padding: 50px 0 100px;
text-align: center;
margin-bottom: -50px;
}
Here's an example
body {
background: white;
margin: 0;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}
<body>
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
</body>
Negative margin is working fine but it's not doing what you are expecting. negative margin-bottom will not make the element to move outside. It will make the parent element to shrink instead.
Here is a simplifed example:
.box {
border:5px solid #000;
}
.box div{
background:red;
height:200px;
margin-bottom:-50px;
}
<div class="box">
<div></div>
</div>
As you can see the parent element has a height less than its child due to negative margin and we are having an overflow.
This is what is happening in your case, and since the overflow is by default scroll you will keep seeing the footer. Add some border and you will better see:
body {
background: white;
margin: 0;
border:2px solid;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
In order to hide the overflowing part, simply adjust the overflow property and you will have what you want:
html {
overflow:auto;
}
body {
background: white;
margin: 0;
border:2px solid;
overflow:hidden;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -200px;
}
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
As you can see, I have added a bigger negative margin to shrink more the body element and to make all the footer outside then I hide it using overflow:hidden
use transform instead of margin
footer {transform: translateY(-50px);}
If I understood your question right, you want a footer to be half hidden from the view.
If so, try to use fixed position, add this to your css:
position: fixed;
bottom: -50px;
If you are using Firefox, try hitting the F12 button for the Web Developer tool.
In the inspector tab you can inspect the element and set the css rules for that element.
Probably you have some kind of conflict with rules declared somewhere else.
You can change live the css for testing in the Web Developer -> Inspector -> Stiles.
For positioning use position and top/bottom/left/right. For example
position: relative;
bottom:50px;
Related
I was wondering how I could make a div that I have fixed to the bottom right of my screen become unfixed once the page reaches the footer.
For example if my html is:
<div class="main" />
<div class="fixed" />
<div class="footer" />
And my css is:
.main {
height: 100vh;
background-color: aqua;
width: 100vw;
}
.fixed {
background-color: green;
height: 200px;
position: fixed;
bottom: 0px;
width: 200px;
}
.footer {
background-color: brown;
height: 300px;
width: 100vw;
}
I would like to have my fixed div in the bottom until the footer starts to be revealed and then have it scroll on top of the footer. Should I use sticky positioning? If so how do I do that? If not is there a better solution?
Thanks.
You can use position: sticky along with bottom: 0 to stick it to the bottom of the viewport (to answer your question of how). Since it's non-sticky location is right before the footer, it will rest naturally when the viewport reaches there.
body {
font-weight: bold;
font-size: 24px;
padding-bottom: 300px;
}
main * {
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
}
.content {
min-height: 1000px;
}
.sticky {
position: sticky;
/* the important part - stick to the bottom */
bottom: 0;
border: 1px solid red;
background-color: white;
}
<main>
<div class="content">content</div>
<div class="sticky">I'm sticky</div>
<footer>footer</footer>
</main>
That being said, as mentioned in the comment by Will - should you use it? That depends on what browsers you support. If you need to support older browsers, you'll need a fallback and/or JavaScript to handle the positioning.
Fiddle: http://jsfiddle.net/rg3w8kxc/2/
I have a fixed bar on top and an element below it. Since the top bar is fixed, I need to add some padding to the top of the element below it so that the whole height of that element shows. However, when I add something like padding-top:40px for example, it doesn't move the element down; rather it creates space below the element. Same goes with margin.
I feel like I'm missing something obvious. What's the issue here?
Here's my HTML:
<div id="top-bar">
<div class="section-wrap">
Win a [name of phone]!
</div><!-- .section-wrap -->
</div>
<div id="top-section-page">
<div class="section-wrap">
<span>⇦</span> Back to the mix
</div>
</div>
<p>Some text here</p>
Here's my CSS:
#top-bar {
background: #FAFAFA;
height: 60px;
line-height: 60px;
padding: 0 20px;
position: fixed;
width: 100%;
z-index: 999;
}
#top-section-page {
background: url("http://i.imgur.com/KNYV8j2.jpg") repeat center top #69C9CA;
border-bottom: 10px solid #FFF;
line-height: 185px;
margin-bottom: 100px;
}
You can add add the padding-top on the body and then you need a top 0px on the #top-bar
Add this to your css code:
body{
padding-top: 40px;
}
#top-bar {
top: 0px;
}
Hello I am writing a site using Aptana Studio 3 I at this stage have 1 <div> for content one <nav> for site navigation and one <footer> containing a simple copyright.
I am currently experimenting with
float:left;
float:right;
This has caused my <footer> to jump to the very top of the page and it won't leave, please help me find a solution which doesn't involve position:absolute; or failing that a way for the absolute position to be centred.
You have to wrap your <nav> and content <div> in a wrapper and add a CSS rule to wrapper overflow: hidden - http://jsfiddle.net/7kpuH/
UPDATE: for the footer that sticks to the very bottom of the page you might want to loo here - Problems with CSS sticky footer
<section>
<div id="content">
content
</div>
<nav>
navigation
</nav>
</section>
<footer>
footer
</footer>
CSS
section, footer { width: 500px; margin: 0 auto; background: #eee; }
section { overflow: hidden }
#content { background: orange; width: 250px; float: left; padding: 20px; }
nav { background: beige; width: 150px; float: right; padding: 20px; }
footer { padding: 20px 0; border-top: 5px solid #fff }
I'm trying to negative position a DIV element (in the example is #content), but my problem is the div's container (#wrapper2), gets too much height (actually is the height the #content is giving, but as I'm moving the content up, I would like to decrease the height of #wrapper2 accordingly).
Here I give you an example to show what I'm trying to achieve. If you try the sample, you'll see that footer stays at too many distance from container. I can make a dirty hack here and make footer top:-200px too but then the scroll bar of the window goes over the footer.
<!DOCTYPE html>
<html>
<head>
<title>Relative positioning demo</title>
<style>
/* RESET STUFF */
html {
margin:0;
padding:0;
border:0;
}
body, div, p, h1 {
margin: 0;
padding: 0;
border: 0;
}
/* END RESET */
h1 {
background-color: yellow;
}
p {
margin-bottom: 1em;
}
/* LAYOUT */
#wrapper1 {
text-align: center;
height: 250px;
background-color: lightgray;
}
#wrapper2 {
background-color: lightblue;
}
#content {
width: 950px;
margin: 0 auto;
background-color: white;
padding: 5px;
height: 560px;
/* HERE's my problem */
position: relative;
top: -200px;
}
#footer {
background-color: black;
color: white;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper1">
<h1>This is my heading</h1>
</div>
<div id="wrapper2">
<div id="content">
My content here
</div>
</div>
<div id="footer">
lorem ipsum
</div>
</body>
</html>
If you have any suggestions, keep in mind that I must see both, the lightgrey and lightblue background (they're images on my site), so margin-top: -200px is not an option (like someone suggested in related questions that I've searched for)
Thanks!
Change the top property to margin-top
Demo
position: relative;
top: -200px;
changed to
margin-top: -200px;
For future references, what I've finally done is to merge the images on the wrapper1 and wrapper 2 in the same image (they were background patterns), so I only have one wrapper now, and I don't need to relative position the content above the second one, it just goes following the page flow.
In the end I've understood that you can't delete the unwanted height without using some sort of Javascript.
In my html I have a div classed "footer". I want it to have a bg to #000 and occupy the full page width and left no white space after it.
I am currently using this CSS:
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.75em 0.75em;
background: #000;
position: relative;
top: 490px;
border-top: 1px solid #000;
}
But the full page width isn't filled with this css code.
Any help? Thanks!
I use sticky footer: http://ryanfait.com/sticky-footer/
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
/* the bottom margin is the negative value of the footer's height */
}
.footer,
.push {
height: 142px;
/* .push must be the same height as .footer */
}
<div class='wrapper'>
body goes here
<div class='push'></div>
</div>
<div class='footer'>Footer!</div>
Essentially, the wrapper is 100% height, with a negative margin the height of the footer ensuring the footer is always at the bottom without causing scroll.
This should accomplish your goal of having a 100% width footer and narrower body as well, because divs are block level elements, and their width is by default 100% of their parent. Keep in mind the footer here is not contained by the wrapper div.
you could make the footer div absolute to the page like this:
.footer {
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 100px;/* or however high you would like */
}
I use a few DIV elements for each section of my webpages.
<div id="tplBody">
<div id="tplHeader">
...
</div>
<div id="tplContent">
...
</div>
<div id="tplFooter">
...
</div>
</div>
Each section is relatively positioned. Using wrapping DIVs, I can set the wrapper a specific width and the elements inside it can be 100% width.
I suggest you steer away from absolute positioning and floating, because they create compatibility issues so may not appear correctly on all browsers.
if you want that your footer be fixed on your page :
.footer{ position:fixed;}
but if you want your footer fixed end of page :
see that
I'm glad for the support you all provided, each one of these replies helped me somehow. I came to this code:
.footer {
height: 59px;
margin: 0 auto;
color: #fff;
clear: both;
padding: 2em 2em;
background: #000;
position: relative;
top: 508px;
}
Thanks!
This issue i have came cross when I started an web application using Bootstrap menu and fixed footer irrespective of browser resolution.
Use below styling for footer element
In-line style
External style sheet using class attribute in Div
<div class="footer"></div>
style.css
.footer
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
External style sheet using id attribute in Div
<div id="divfooter"></div>
style.css
#divfooter
{
backgroud-color:black;
position:fixed;
bottom:0;
height:2%;
}
You can use this styles in your CSS to achieve your goal
.footer{
background-color: #000;
min-width: 100%;
height: 100px;
bottom:0;
position: fixed;
}
If you are using bootstrap try with margin-left: -15px and margin-right:-15px but it will not be necessary in most cases when you have your own class.
html:
<div class="footer">
<p>
Some text comes here! © 2015 - 2017
</p>
</div>
css:
.footer {
width: 100%;
height: auto;
text-align: center;
background: rgb(59, 67, 79);
position: fixed;
bottom: 0%;
margin-top: 50%;
}
* {
padding: 0;
margin: 0;
}
I was facing same issue and solved it with using jquery.
<body>
<div id="header" style="background-color: green">This is header</div>
<div id="main-body" style="background-color: red">This is body</div>
<div id="footer" style="background-color: grey">This is footer</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
if(($(document).height() - $("body").height()) > 0){
var main_body_height = $(document).height() - $("#footer").height() - $("#header").height()
$('#main-body').css('min-height', main_body_height+'px');
}
</script>
What I'm doing here is based on the Screen size of the User.
I'm increasing the main-body section height after subtracting the height of header and footer from it.
If the complete html body height is less then the user screen size then it will increase the main-body section height and automatically footer will reach the bottom of page.