I have some webpages that do not have much content and the footer sits in the middle of the page, but I want it to be at the bottom.
I have put all my pages in a "holder"
#holder {
min-height: 100%;
position:relative;
}
And then used the following CSS for my footer
ul.footer {
margin-top: 10px;
text-align: center;
}
ul.footer li {
color: #333;
display: inline-block;
}
#footer {
bottom: -50px;
height: 50px;
left: 0;
position: absolute;
right: 0;
}
The html for my footer
<div class="container">
<div class="row">
<div class="span12">
<div id="footer">
<ul class="footer">
<li>Website built by Fishplate</li>
<li>Email:exampleemail#gmail.com</li>
</ul>
</div>
</div>
</div>
</div>
I would like to keep the footer fluid.
just add the class navbar-fixed-bottom to your footer.
<div class="footer navbar-fixed-bottom">
Update for Bootstrap 4 -
as mentioned by Sara Tibbetts - class is fixed-bottom
<div class="footer fixed-bottom">
As discussed in the comments you have based your code on this solution: https://stackoverflow.com/a/8825714/681807
One of the key parts of this solution is to add height: 100% to html, body so the #footer element has a base height to work from - this is missing from your code:
html,body{
height: 100%
}
You will also find that you will run into problems with using bottom: -50px as this will push your content under the fold when there isn't much content. You will have to add margin-bottom: 50px to the last element before the #footer.
Most of the above mentioned solution didn't worked for me. However, below given solution works just fine:
<div class="fixed-bottom">...</div>
Source
http://bootstrapfooter.codeplex.com/
This should solve your problem.
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>
CSS:
html,body
{
height:100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
color:#fff;
}
Here is an example using css3:
CSS:
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
<div id="wrap">
<div class="container clear-top">
body content....
</div>
</div>
<footer class="footer">
footer content....
</footer>
fiddle
Use the bootstrap classes to your advantage. navbar-static-bottom leaves it at the bottom.
<div class="navbar-static-bottom" id="footer"></div>
It could be easily achieved with CSS flex.
Having HTML markup as follows:
<html>
<body>
<div class="container"></div>
<div class="footer"></div>
</body>
</html>
Following CSS should be used:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
body > .container {
flex-grow: 1;
}
Here's CodePen to play with: https://codepen.io/webdevchars/pen/GPBqWZ
I have found a simple solution for this.
For body tag add
<body class="d-flex flex-column min-vh-100">.
On footer tag add class
mt-auto
The entire code looks as follows
<html>
<head> </head>
<body class="d-flex flex-column min-vh-100">
<div class="container-fluid"></div>
<footer class="mt-auto"></footer>
</html>
This is working for bootstrap 4+ and tested till 5 beta 1
Related
This image shows what I am trying to do.
Basically, I have a header and footer inside the body. I have a div1 inside a header which has a size that can vary. I want to align div2, which is inside the footer, so that its right border is matches the right border of div1.
The following HTML can explain the structure.
<body>
<div id="header">
<div id="div1">
</div>
</div>
<div id="footer">
<div id="div2">
</div>
</div>
This would be the css.
#div1 {
overflow: auto;
display: grid;
float: start;
}
#div2 {
width: 20px;
// ??????
}
There's no float: start. You just be better off having a common container, as how it is in Bootstrap and other frameworks to "contain" your code. So your page might be rendered well this way:
body {
font-family: 'Segoe UI';
background: #ffa500;
}
#header {
background-color: #fcc;
padding: 10px;
}
#footer {
background-color: #f99;
padding: 10px;
}
.container {
max-width: 65%;
overflow: hidden;
}
#div1 {
padding: 10px;
background-color: #99f;
}
#div2 {
padding: 10px;
background-color: #ccf;
float: right;
width: 50%;
}
<div id="header">
<div class="container">
<div id="div1">
div1
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div id="div2">
div2
</div>
</div>
</div>
Preview
I am trying to add all of these skills on one bar. The text does not need to show,just want them all to display on the same one instead of four separate
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
}
.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}
<html>
<head>
<style>
</style>
</head>
<body>
<h1>My Skills</h1>
<p>HTML</p>
<div class="container">
<div class="skills html">10%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills js">65%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skills php">60%</div>
</div>
</body>
</html>
ones. Because its four, all would need to be 25%
The first thing to know is that divs are block elements, and will take up 100% of their containers (in this case the container div, which is 100% of the <body>). You need to set the display property to display: inline-block. This will allow them to be a set width.
Second, the percentages for the widths need to add up to 100% or less. More than 100%, and they will start to wrap to the next line.
See the code snipet below.
Edit: should also mention that all of your smaller divs need to be in one container, not each in their own container, if you want them to appear together like that.
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
display: inline-block;
}
.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 35%; background-color: #f44336;}
.php {width: 30%; background-color: #808080;}
<html>
<head>
<style>
</style>
</head>
<body>
<h1>My Skills</h1>
<div class="container">
<div class="skills html">10%</div>
<div class="skills css">80%</div>
<div class="skills js">65%</div>
<div class="skills php">60%</div>
</div>
</body>
</html>
I have this html structure with the section being basically my main content:
<html>
<head>
<body>
<nav id="primary">
<nav id="secondary">
<section id="maincontainer">
<div id="main">...</div>
<footer>
<div class="footer-inner">...</div>
</footer>
</section>
</body>
</html>
Within the div with id 'main' there is content being dynamically loaded via ajax, so the height can vary.
I need the footer to always be at the bottom, even for sub pages with barely any content not filling the page height.
Currently I have position absolute for the footer, which does not work for the dynamic content pages, the footer is stuck in the middle of the content (original window height position).
Is there a way to do this css only?
Thank you!
Do this
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
You can also read about flex it is supported by all modern browsers
Update:
I read about flex and tried it. It worked for me. Hope it does the same for you. Here is how I implemented.Here main is not the ID it is the <main> div
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: block;
flex: 1 0 auto;
}
Here you can read more about flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Do keep in mind it is not supported by older versions of IE.
Using bottom:0; position:fixed for footer style You can easily achieve what you want.
body,html{ margin:0px; padding:0px;height:100%}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
position: fixed;
bottom: 0;
width: 100%;
height:50px;
}
.site-footer {
background: red;
}
<div class="page-wrap">
<nav id="primary"></nav>
<nav id="secondary"></nav>
<section id="maincontainer">
<div id="main">...</div>
<footer class="site-footer">
<div class="footer-inner">Footer</div>
</footer>
</section>
</div>
Hope it helps.
Method 1: Using calc() property by wrapping the header and content in one div.
body,html{ margin:0px; padding:0px;height:100%}
.wrapper{height:calc(100% - 50px);}
footer{ height:50px; background:red;}
<div class="wrapper">
<nav id="primary"></nav>
<nav id="secondary"></nav>
<section id="maincontainer">
<div id="main">...</div>
</section>
</div>
<footer>
<div class="footer-inner">Footer</div>
</footer>
Method 2: By using -ve height of footer with the wrapper element.
body,html{ margin:0px; padding:0px;height:100%}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 50px;
}
.site-footer {
background: red;
}
<div class="page-wrap">
<nav id="primary"></nav>
<nav id="secondary"></nav>
<section id="maincontainer">
<div id="main">...</div>
</section>
</div>
<footer class="site-footer">
<div class="footer-inner">Footer</div>
</footer>
EDIT
Method 3: using same structure and calc().
body,
html {
margin: 0px;
padding: 0px;
height: 100%
}
#primary {
height: 50px;
background: green;
width: 100%;
}
#secondary {
height: 50px;
background: yellow;
width: 100%;
}
#maincontainer {
width: 100%;
height: calc(100% - 130px);
}
#main {
height: 100%;
}
footer {
background: red;
height: 30px;
}
<nav id="primary">Nav 1</nav>
<nav id="secondary">Nav 2</nav>
<section id="maincontainer">
<div id="main">...</div>
<footer>
<div class="footer-inner">...</div>
</footer>
</section>
I'm trying to figure out how to create a fluid layout with a fixed width sidebar and fluid content area using Jeet.
HTML:
<div class="wrapper">
<div class="sidebar"></div>
<div class="content"></div>
</div>
CSS:
.wrapper {
width: 100%;
}
.sidebar {
width: 240px;
}
Looks like it is not possible with Jeet to set the content css to take rest of the layout, is it so?
You have to use define content width
HTML CODE
<div class="wrapper">
<div class="sidebar">
<div class="content-box">
Content Here !!!!
</div>
</div>
<div class="content">
<div class="content-box">
Content Here !!!!
</div>
</div>
</div>
CSS CODE
.wrapper {
color: #fff;
}
.sidebar {
width:30%;
display:inline-block;
float: right;
background: #333;
}
.content {
width: 70%;
display: inline-block;
background: #666;
}
.content-box {
padding: 20px;
}
Please check Demo Here https://jsfiddle.net/568447zu/
Any idea how to achieve the layout indicated in the image below with pure CSS, if the order of the divs in the markup must be as follows?
NOTE - The height of each panel is unknown; wrapper divs may be added to the markup
<body>
<div id="content"></div>
<div id="nav"></div>
<div id="search-results"></div>
</body>
This technique is taken from the question
Make a div display under another using CSS in a totally fluid layout.
It uses CSS table presentation using properties of display: table family to rearrange the presentation order of dom elements.
As said in the above question:
This works in all modern browsers, and IE8 if you're careful. It does
not work in IE6/7.
HTML
<div id="wrapper">
<div id="content-wrapper">
<div id="content">content</div>
</div>
<div id="nav-search-block">
<div id="nav-wrapper">
<div id="nav">nav</div>
</div>
<div id="search-results-wrapper">
<div id="search-results">search-results</div>
</div>
</div>
</div>
CSS
#wrapper {
display: table;
width: 100%;
}
#nav-wrapper,
#search-results-wrapper {
float: left;
width: 50%;
}
#nav,
#search-results {
color: #ffffff;
background: #6699ff;
padding: 10px;
margin: 10px;
}
#nav-search-block {
display: table-row-group;
}
#content-wrapper {
display: table-footer-group;
}
#content {
color: #ffffff;
background: #cc0000;
padding: 10px;
margin: 10px;
}
Demo
Now you can do this in javascript
as like this
Javascript
document.getElementById('one').innerHTML=document.getElementById('content').innerHTML;
CSS
#content{
display:none;
}
#one{
background:red;
padding:10px;
clear:both;
}
#nav{
background:green;
float:left;
width:35%;
}
#search-results{
float:right;
width:65%;
background:yellow;
}
HTML
<body>
<div id="content">Content I m first in html </div>
<div id="nav">navi</div>
<div id="search-results">Search-Results</div>
<div id="one"></div>
</body>
Live Demo