I want to center a button in the bottom of the page:
<footer>
<div class="centerContent">
<input name="submit" type="submit" />
</div>
</footer>
Css:
.centerContent {
text-align: center;
}
footer {
clear: both;
height: 100px;
position: absolute;
bottom: 0;
}
If I remove the "footer" part of the Css, the button is not in the bottom of the page of course, but at least it is in the horizontal center of the page. If I leave the "footer" part in the Css, the button is in the bottom of the page but.....it is not horizontally centered anymore!!! Anybody knows why? Thanks a lot.
For horizontal align, you should stretch footer to full width. Add width:100% to footer style.
.centerContent {
text-align: center;
}
footer {
clear: both;
height: 100px;
position: absolute;
bottom: 0;
width: 100%;
}
footer {
bottom: 0;
clear: both;
height: 100px;
position: absolute;
text-align: center;
width: 100%;
}
Try add width:100% to the footer
footer {
width: 100%;
clear: both;
height: 100px;
position: absolute;
bottom: 0;
}
position: absolute will make the footer lose it's width by default.
Add left and right properties to your footer, both set to 0:
footer {
clear: both;
height: 100px;
position: absolute;
bottom: 0;
/* add the following lines */
left: 0;
right: 0;
}
If you add width: 100% instead (as other answers suggest), your footer might spread the page out because of any additional margins and/or paddings.
Related
I am working on a small personal project to try and relearn HTML & CSS and I am having some issues with pinning the footer of my site to the bottom of the page.The site can be found here.
I have tried searching online and found that my footer CSS should have the following:
bottom: 0;
position: fixed;
This does pin it to the bottom but it exceeds the width of my container and doesn't look right. Can anyone help?
Thanks.
You have to understand how position: fixed; is working. It ignores any surrounding element. ie. A fixed position element is positioned relative to the view-port, or the browser window itself.
Your .container styles are:
margin: auto;
width: 75%;
So apply this also to the footer:
footer {
bottom: 0;
margin: auto;
width: 75%;
position: fixed;
height: 300px;
background: #2D2D2D;
border-top: 12px solid #3E3E3E;
}
you can try to play around with the width of the footer to see what fits. e.g.
width: 100%;
bottom: 0;
position: fixed;
try this:
body {
line-height: 1;
height: 100%;
display: table;
width: 100%;
}
footer {
display: table-row;
height: 1px;
width: 100%;
}
footer:before, footer:after {
content: " ";
display: table;
}
footer:after {
clear: both;
}
I have currently got a footer in my website that I want to have at the bottom of the page at all times. It is only one line on most screens so I thought it would be a good idea to have it always there. I want to stay away from JavaScript too.
CSS
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div class="footer">
<p class="footer">Design by <a class="footer" href="http://www.tropilac.com">Tropilac</a></p>
</div>
Use position: fixed if you need to show at all times.
html,
body {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
background: lightgray;
color: black;
}
<html>
<body>
<div class="footer">
<p class="footer">Design by Tropilac
</p>
</div>
</body>
</html>
Try positioning your element to fixed. This is useful for elements such as a footer as if you do something like this:
.footer {
position: fixed;
height: 50px;
border: 1px solid #ccc;
position: fixed;
bottom: 0;
left: 10%;
right: 10%;
}
This will give you a footer that stays at the bottom of the viewport. One drawback is that if the content is longer than the page the footer will still show positioned at the bottom of the page. This code will also give you your 80% width.
Fiddle: http://jsfiddle.net/p16rwgnn/
Use position:fixed and bottom:0 to get what you want
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
Ok i have problem to force footer on bottom when not enough content to push it there naturally.
I partially solved problem. It is rly simple design, i have header, content and footer, all inside div wrapper.
html,
body {
margin:0;
padding:0;
height:100%;
font: sans-serif;
}
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding: 2% 5%;
max-width: 940px;
margin: 0 auto;
padding-bottom:80px; /* Height of the footer element */
clear: both;
background-color: yellow;
}
footer {
background:#ffab62;
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
font-size: 0.75em;
text-align: center;
padding-top: 30px;
clear: both;
color: #ccc;
}
I have used background color to see position of elements on page. So when there is not enough content footer is on bottom and it is OK. When there is more than enough content footer is overlapping some of it, it gets fixed when i put position on footer relative instead of absolute but then on pages where there is not enough content footer is not on bottom.. Fixing one other is not good and fixing that other first page is not good.. Is there any solution that can help me solve this...
Adjust your min-height: to the minimum value where you want your footer to end up, 100% will put it right below your content (which should be the default anyway without even declaring) which you said isn't long enough; make a minimum-height: 900px; or similar to where you want the minimum end point to be where the footer will live.
If the footer is in the correct place in the HTML but it is floating up. Then consider the below.
display:inline-block;
add to footer.
footer {
display: inline-block;
}
If these don't work, show your HTML!
You nearly did it :)
Your content div is overlaping the sticky footer because of its height. Just use a height: calc(100% - footer_height); and start your content where your header finishes.
This is a JSFiddle example of this usage.
CSS file
html,
body {
margin: 0;
height: 100%;
}
.container {
min-height: 100%;
position: relative;
}
.header {
background: #d6d6d6;
position: absolute;
height: 80px;
width: 100%;
top: 0;
left: 0
}
.content {
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: calc(100% - 80px);
background: yellow;
}
.footer {
background: #d6d6d6;
position: absolute;
height: 80px;
bottom: 0;
left: 0;
width: 100%;
clear: both;
}
I hope it is useful.
I am building a site that works fine in both Chrome and Safari, but am having difficulties in Firefox. The applicable HTML in this issue is simple, is is just three divs inside of another div. The goal is to have one div positioned at the top of the parent div, one at the bottom, and one stretching across the remaining space:
<div class="outer">
<div class="top">
<p>some junk here</p>
</div>
<div class="middle">
<img src="<?php echo(htmlspecialchars($image_url)); ?>"/>
</div>
<div class="bottom">
<p>more junk</p>
</div>
</div>
Now, the css is as follows:
.outer {
position: relative;
display: inline-block;
text-align: center;
width: 600px;
height: 600px;
}
.middle {
background-size: 100%;
top: 62px;
bottom: 62px;
right: 0;
left: 0;
margin: 0;
padding: 0;
position: absolute;
}
.middle img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 95%;
max-height: 95%;
}
.top, .bottom {
width: 100%; /* THIS IS WHAT IS NOT WORKING */
height: 60px;
margin: 0;
padding: 0;
display: table;
position: absolute;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
The issue is that the top and bottom divs are not extending to 100%. The are taking up as little space as necessary to fit their content. I have tried setting a max width on the divs, tried changing the display types, but nothing works. The kicker is, once I resize the window even the smallest amount, the top and bottom divs shoot to 100%. Strange. I am at a loss with this one so any help is greatly appreciated. Thanks.
.outer DIV cannot be display: inline-block for this scenario. inline-block means to adapt to the child widths. You need to either specify an exact width dimension, or use block display property.
.outer {
position: relative;
display: block; /* use BLOCK here instead of inline-block; */
text-align: center;
}
The reason why the top and bottom divs' widths were not working properly was because they were set to a display type of table. Removing just that line fixed the issue.
.top, .bottom {
width: 100%;
height: 60px;
margin: 0;
padding: 0;
/* REMOVE: display: table; */
position: absolute;
}
I have read all the tutorials on how to make the footer at the bottom of the webpage but still i'm unable to do it for my site.
The links i have referred are
How do you get the footer to stay at the bottom of a Web page?
Making my footer stick to bottom of the page
Ways to stick footer to the bottom a page
making the footer stick the bottom
None of it worked..!
CSS
#footer1 {
clear: both;
background-color: #333;
width: 1200px;
min-width: 100%;
width: 100%;
bottom: 0;
position: relative;
height: 50px;
border-top:5px solid #1b9bff;
}
Here is the dummy fiddle of my site
Fiddle
This is the fiddle i have tried but there is a bug in it too
http://jsfiddle.net/andresilich/fVpp2/1/
Try this:
<div id="container">
<div id="content"></div>
</div>
<div id="footer">My Sticky Footer</div>
CSS:
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content { padding-bottom: 3em; }
Add/Edit as following
#body {
margin-bottom: 85px;
position: relative;
}
#footer1 {
position: fixed;
}
I guess this is what you want
* html #form1 {
height:100%;
}
#form1 {
min-height: 100%;
position: relative;
}
#body {
padding-bottom: 50px; /* padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
}
#footer1 {
position: absolute;
width: 100%;
clear: both;
bottom: 0;
padding: 0;
margin: 0;
}
Following the code of this method - you need to to:
1) Place your footer outside the form
2) Add height: 100% on form
3) Set negative bottom margin to form according to the height of the footer.
form {
min-height: 100%;
height: 100%;
margin: 0 auto -150px; /*footer 150px high */
}
Modified Fiddle