I want my footer div to take all the horiziontal space available. Here is my code, but it doesn't work. Hope you can help me!
HTML
<div id=footer>
NewCom France Copyright © 2020
</div>
CSS
#footer {
padding: 12px;
background-color: #999999;
text-align: center;
position: fixed;
bottom: 0;
text-align: center;
margin: 0 auto;
line-height: auto;
}
Margin on a fixed-position element does nothing, and margin on body won't affect it either, as position: fixed positions an element relative to the viewport, outside of the flow of any other elements.
To ensure full width, a fixed-position element will need to have its right and left properties set.
#footer {
/* positioning */
bottom: 0;
left: 0;
position: fixed;
right: 0;
/* other styling */
background-color: #999999;
line-height: auto;
padding: 12px;
text-align: center;
}
As a side note, you have duplicate text-align: center values in your original CSS.
Ordering your CSS properties in a consistent way (for instance, I like to alphabetize my CSS properties, but in the example above also grouped them by type) will help you avoid potentially hard-to-find bugs or duplicate properties.
Is there enough content to fill up 100vh? You can just set your footer to fill that space if not, or set your body height or min-height
I recommend a flexbox layout where the footer does not expand but rather the main content but here is what you are looking for:
body {
display: flex;
flex-direction: column;
background-color: gray;
height: 100vh;
margin: 0;
padding: 0;
}
header {
background-color: red;
}
main {
background-color: blue;
}
footer {
flex: 1 auto;
background-color: green;
}
<body>
<header>
<p>Hi in the header</p>
</header>
<main>
<p>Hi in the main</p>
</main>
<footer>
<p>Hi in the footer</p>
</footer>
</body>
Related
I want to center .donut-graphs inside .dashboard horizontally, so the space between the right edge of the sidebar and the left edge of .donut-graphs is the same as the space from the right edge of .donut-graphs and the right edge of the screen. I have managed to do so, but I had to remove position: fixed from .navbar. The problem is, I can't do that because my sidebar has to stay on top of the screen when you scroll up/down, and with position: fixed on .navbar, the graphs aren't centered properly.
HTML:
<div class="container">
<div class="navbar">
</div>
<div class="content">
<div class="dashboard">
<div class="donut-graphs">
<div class="dashboard-income">
Div 1
</div>
<div class="dashboard-overall">
Div 2
</div>
<div class="dashboard-spent">
Div 3
</div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
}
.container {
display: flex;
align-items: stretch;
max-width: 100%;
min-height: 100vh;
}
.navbar {
background-color: #ddd;
flex: 0 0 230px;
position: fixed;
height: 100vh;
width: 230px;
}
.content {
flex: 1;
overflow-x: auto;
text-align: center;
}
.donut-graphs {
display: inline-flex;
border: 1px solid;
margin: 50px auto 0;
position: relative;
text-align: left;
}
.dashboard-income,
.dashboard-overall,
.dashboard-spent {
height: 256px;
width: 357px;
display: inline-block;
}
.dashboard-income {
background-color: green;
}
.dashboard-overall {
background-color: blue;
}
.dashboard-spent {
background-color: red;
}
How can I overcome the issue?
Demo
position: fixed puts element above everything. That element won't attach to any element in body because it is the way that works. It only becomes dependent of viewport
What you want to achive could be done with position: absolute but parent (whose child you want to center) has to be position: relative for this to work.
Read more about positioning elements in css here
.content { padding-left:230px; }
Should do the trick.
Assigning your navbar a fixed position takes it out of the document flow, so when centering your donut graphs the browser doesn't take the navbar into account.
Giving the .content element a padding equivalent to the width of the navbar makes up for this.
The only problem with this approach is that if .navbar changes dimensions, you'll need to change the padding on .content to match.
I am making a website and I added a footer that has a link to my GitHub profile and the website repo. I've got the footer looking how I want it to except the links are right next to each other with barley any space between them. I've tried to add a paragraph with just spaces in between the links but then it made the footer just have three separate lines. How can I add some space between the links and keep them on the same line.
Here is the CSS and HTML for my footer:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: DarkGray;
text-align: center;
line-height: 50px;
}
<div class="footer">
GitHub Profile
Website Repo
</div>
I usually separate elements like that by making a class to pad the items in question. Adding padding to elements can space them out. You can change the element's placement in its parent element with various "display" settings, or use margin or even border to put space between things, or even use columns in the space provided, but padding seems to be the most appropriate use.
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: DarkGray;
text-align: center;
line-height: 50px;
}
.footer-links {
padding: 0 10px 0 10px; /* padding-top, padding-right, padding-bottom, padding-left */
}
<div class="footer">
<a class="footer-links" href="[github profile url]">GitHub Profile</a> /* add this class to each of your footer items */
<a class="footer-links" href="[website repo link]">Website Repo</a>
</div>
Well, you can achieve spacing between the links using the padding property. For example: put on the links classes with the same name:
<div class="footer">
GitHub Profile
Website Repo
</div>
and then in CSS:
.footer__link {
padding-right: (your value --> it could be in px,em,rem etc.);
}
For situations like the this, I like to use flexbox. I've added the justify option to space-around in this case but there are many more options. See https://www.w3schools.com/css/css3_flexbox.asp for more info:
.footer {
position: fixed;
display: flex;
justify-content: space-around;
left: 0;
bottom: 0;
width: 100%;
background-color: DarkGray;
text-align: center;
line-height: 50px;
}
<div class="footer">
GitHub Profile
Website Repo
</div>
just use margin in your css like this:
.footer a:first-child{
margin-right: 50px(change to how much you want);
}
You can add padding or margin on both sides of the anchor tag.
.footer a {
padding: 0 10px; /**Or whatever value you want**/
}
/**OR**/
.footer a {
margin: 0 10px; /**Or whatever value you want**/
}
```
I have split my footer tag into 2 seperate tags, 1 being a disclaimer and the other being contact but the children tags wont inherit the background color i want to set.
<footer role="contentinfo" id="contentinfo">
<div class="disclaimer">
</div>
<div class="contact">
</div>
</footer>
footer {
color: #FFF8BF;
width: 100%;
padding:0 px;
background-color: #1C1C1C;
margin-top: 0px;
margin-bottom: 0px;
bottom: 0;
display: block;
/*border-radius: 0px 0px 10px 10px ;*/
}
.disclaimer {
float: left;
color: white;
max-width: 50%;
}
.contact {
color:white;
float:right;
text-align: left;
padding-right: 20px;
padding-top:0px;
padding-bottom:0px;
margin: 0px;
max-width: 50%;
}
Thanks for any help
Blockquote
Either you set a height of the footer:
CSS
footer {
min-height: 100px;
}
Or you could insert content into the footers' children and set the overflow:auto property for the footer
HTML
<footer role="contentinfo" id="contentinfo">
<div class="disclaimer">
Sample content
</div>
<div class="contact">
Sample content
</div>
</footer>
CSS
footer {
overflow: auto;
}
Here's an example Fiddle.
Background color property cannot be inherited
you can achieve what you want by adding this in your code before closing footer tag
<br style='clear:both'></footer>
Actually, the background color is shown in your child divs, but since you are using float in them, and didn't set a specific height on your footer, the height of your footer is 0 since floating elements don't expand the parent container. At least not for block elements. Unless you set a different display attribute like display: table.
so change your footer class to:
footer {
color: #FFF8BF;
width: 100%;
padding:0 px;
background-color: #1C1C1C;
margin-top: 0px;
margin-bottom: 0px;
bottom: 0;
display: table; // <---- change this to table instead of block
/*border-radius: 0px 0px 10px 10px ;*/
}
You do not have a height at the moment, as the content and disclaimer are empty
if you add overflow:auto; with footer it will work. Try giving a width and height. Also for testing you can always add a border: 1px solid red; or something
EDIT: For now instead of max-width use width or min-width as with max-width the max width will be 50% yes BUT it can be 0% as it is in this case
I have boxes that each display the title and date of a blog post. Blog titles will take up a maximum of three lines of the box.
HTML
<article class="box" style="height: 144px">
<header class="entry-header" style="padding-top: 15%;">
<?php the_title(); ?>
</header>
<footer class="entry-meta" style="font-size: 12px;">
<?php echo get_the_date(); ?>
</footer>
</article>
CSS
.box {
background-color: #333333;
color: white;
}
.box header {
text-align: center;
word-wrap: break-word;
margin: 0 10px 0 10px;
}
.box footer {
text-align: center;
}
Since titles can vary in length, I am having trouble aligning the date to the bottom of the box.
Expected result
I have tried setting margin-top to the footer, but this doesn't correctly align the dates because they are all displayed on a different line. Is there another way I can go around doing this?
Set position:relative; on the box.
Set position:absolute; on the footer (date)
.box {
position: relative;
}
.box footer {
position: absolute;
bottom: 10px; /* however much you need */
}
Alternatively you could use css tables as well:
FIDDLE
CSS
.box
{
display: table;
}
header
{
display: table-row;
height: 100%; /* fills remaining height */
}
footer
{
display: table-row;
height: 20px;
}
if those boxes are going to always be a fixed consistent height you can wrap the content in a container and set a height on it and put the date underneath, example:
HTML
<div class="box">
<div class="container">
<p>text goes here</p>
</div>
<p>24 December, 2013</p>
</div>
CSS
.box{
height: 100px;
width: 100px;
background-color: grey;
}
.container{
height: 90px;
width: 100%;
}
If you have browsers with flexbox support, you can use
.box {
display: inline-flex;
flex-direction: column;
}
and push the footer to the bottom with
.box footer {
margin-top: auto;
}
See JSFiddle
I am playing around with CSS Sticky Footer and I have an issue where...
* { margin: 0; }
Although it is designed to reset all DIV margins, this is not what I want to do. The text on every page are squished and have no margins now.
I have tried defining it on every element I want but with no success i.e...
div.wrapper, div.push, div.footer { margin: 0; }
How can I bypass it so only the necessary elements by sticky footer have a margin of 0, and the rest remain untouched?
Delete the * CSS and change the HTML one to:
html, body {
height: 100%;
margin: 0;
}
.footer * {
margin: 0;
}
I don't get it.. why use sticky footer. Try creating a css table structure like this. People underestimate CSS tables! They can be awesome in creating fluid designs..
#wrapper { display: table; height: 100%; width: 1000px; }
#wrapper > header, #wrapper > footer { display: table-row; min-height: 100px; }
#main { height: 100%; }
<div id="wrapper">
<header>
<h1>I'm a header!</h1>
</header>
<div id="main">
</div>
<footer>
<p>I'm a footer!</p>
</footer>
</div>
In this CSS example none of the other elements will be affected and both the footer and header keep their height while the mid section is fluid filling the restspace..
Also take a look at table-cell.. it allowes for horizontal structurs like a solid left side with a fluid main section.
Also to correct the text in the fotter you can edit this CSS:
font: 0.8em helvetica,arial,sans-serif;
Line 50 of the style.css
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 700px;
padding: 0;
color: white;
font: 0.8em helvetica,arial,sans-serif;
text-align: center;
}
Why would you use a premade sticky footer if it's been created that easily?
Try:
<footer><span>Footer Content</span></footer>
with the following CSS:
footer{
position:fixed;
bottom:0px;
height:30px;
width: 100%;
z-index: 9999;
color: #595959;
font-size: 9pt;
text-align: center;
}