I am trying to force my footer to the bottom of the page, while still retaining separation between them, but it doesn't seem that Justify-Content, and Position: Fixed work together.
Edit: I have updated my post to include the currently used CSS for this project.
<div class="footer">
<div class="left links">
<a href="https://www.facebook.com/" target="_blank">
<img width="35" height="35" src="FB2.svg" alt="">
</a>
</div>
<div class="right links">
<a href="https://www.twitter.com/" target = "_blank">
<img width="35" height="35" src="Twitter.svg" alt="">
</a>
</div>
</div>
body {
display: flex;
flex-wrap: wrap;
margin: 0;
font-family: "Helvetica";
}
.Nav {
display: flex;
width: 100vw;
background-color: white;
padding: 5px;
}
ul {
display: flex;
color: white;
font-size: 25px;
list-style-type: none;
margin-left: 20px;
gap: 50px;
}
a {
color: black;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.footer {
display: flex;
flex: 1;
flex-wrap: wrap;
align-items: center;
justify-content: center;
justify-content: space-between;
position: fixed;
gap: 20px;
}
Your footer has position: fixed but it does not have any position set, e.g. top bottom left right. Set those values explicitly:
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
as a shorthand, you can make use of the inset property.
.footer {
position: fixed;
inset: auto 0 0 0;
}
This is a similar shorthand to margin, where the 4 values map to top, right, bottom, and left, respectively.
Div elements (and every other element using display: block) default to full parent width. If you set position to fixed, this is no longer the case. Your problem probably is fixed by adding the following to .footer:
width: 100%;
Assign width to footer
.footer {
width: 100%;
display: flex;
flex: 1;
flex-wrap: wrap;
align-items: center;
justify-content: center;
justify-content: space-between;
position: fixed;
gap: 20px;
}
Related
I have tried changing a bunch of things in the CSS with classes and id's, but nothing seems to make it so that both images will be on the far side of the screen (logo on the far left and profile on the far right).
Tried lots of different things like text-align and different justify-contents but nothing appears to work.
Here is the code:
.top-nav {
display: flex;
position: absolute;
background-color: blue;
opacity: 0.5;
height: 10%;
top: 0;
width: 100%;
left: 0;
padding: 0;
border: 0;
margin: 0;
list-style: none;
}
.top-nav div {
display: flex;
justify-content: space-between;
height: 100%;
margin: 0px;
padding: 0;
border: 0;
margin: 0;
}
<div class="top-nav">
<div style="flex-grow: 1"><img src="/textures/logo.svg"></div>
<div style="flex-grow: 1"><img src="/textures/profile.svg"></div>
</div>
justify-content right now does nothing, because it's set on a div that doesn't have display:flex on it.
If you want want the divs with images separeted, then put the justify-content:space-between on the div that has them i.e. the top-nav div.
The obvious answer is that you set the flex-items the top-nav div elements – the parents of the <img> elements – to expand to fill the availlable space; this means the <div> elements fill that space, and the <img> elements are aligned via the default text-align for the language defined by your browser.
Instead you could either remove the <div> elements, as they do little to help and bloat the HTML for no reason, and specify justify-content: space-between on the .top-nav element:
.top-nav {
display: flex;
background-color: blue;
justify-content: space-between;
}
<div class="top-nav">
<img src="https://placekitten.com/300">
<img src="https://via.placeholder.com/300">
</div>
Or, you could either retain the <div> elements and simply omit the flex-grow statement:
.top-nav {
display: flex;
background-color: blue;
justify-content: space-between;
}
<div class="top-nav">
<div><img src="https://placekitten.com/300"></div>
<div><img src="https://via.placeholder.com/300"></div>
</div>
Or simply use text-align on those <div> elements:
.top-nav {
display: flex;
background-color: blue;
justify-content: space-between;
}
.top-nav div:first-child {
text-align: left;
}
.top-nav div:last-child {
text-align: right;
}
<div class="top-nav">
<div><img src="https://placekitten.com/300"></div>
<div><img src="https://via.placeholder.com/300"></div>
</div>
References:
display.
flex-grow.
justify-content.
text-align.
Looking for a result similar to this?
.top-nav {
display: flex;
position: absolute;
background-color: blue;
opacity: 0.5;
height: 10%;
top: 0;
width: 100%;
left: 0;
padding: 0;
border: 0;
margin: 0;
list-style: none;
}
.top-nav .brand {
margin-right: auto; /* Push element to the left*/
}
.top-nav .profile {
margin-left: auto; /* Push element to the right */
text-align: right;
}
<div class="top-nav">
<div class="brand">
<img src="/textures/logo.svg">
</div>
<div class="profile">
<img src="/textures/profile.svg">
</div>
</div>
I am trying to make it so the second section or the first section will align center with the top.
What I don't understand is the relationship between items with display flex vs items that have display block.
First Question: Is there a way with flex so the top logo doesn't look "off" center compared to the centered text in the second section?
Link To Pen: https://codepen.io/skella1/pen/vYZLdVN
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
Center the image using justify-content: center on the flex parent element and then set the P elements position to absolute and position it using the top/right properties.
Right now you have two elements that are taking up space in the flex parent elements width. The image and the P tags content. Using justify-content: space-between will place the remainder of the width the elements do not use, between them. In turn skewing the look of the image from being in the center regardless of your margin set to 0 auto, as that only places it in the center of the space it takes up from the parent.
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.header p {
position: absolute;
top: 0;
right: 20px;
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
}
.secHeader h1 {
text-transform: uppercase;
font-weight: 900;
}
.content {
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.content .login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
Answer to Question 1) A really quick fix to this was using the transform property in CSS to center the image with respect to the current position
Answer to Question 2) Simply set the max-width property on the .content class to prevent the scrolling you talked about
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
width:100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
transform:translate(50%,0%); /* MODIFIED CODE HERE */
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
height: 100vh;
max-width:100vw; /* MODIFIED CODE HERE */
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
If you're insisting on using flexbox for the header, what you can do is the following:
<div class="header">
<div>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/100x50" alt="">
</div>
<div class="text-right">
<p>Text Goes Here</p>
</div>
</div>
.header {
height: 50px;
display:flex;
padding: 0px;
justify-content: space-between;
div {
flex:1;
}
div.text-center {
text-align:center;
}
div.text-right{
text-align:right;
}
}
Please note that this is just a workaround, flexbox is not the only solution here. You might use position:absolute for this.
So, I am trying to use flexbox to create a navbar, and basically I want my logo centred and my navbar toggler to the left of the screen.
However, if I give the flex container the justify-content property with the value of center it would just center both my logo as well as my navbar toggler.
I wanted to know whether there is something similar to align-self property but for the main axis?
So I can set my logo to center and my navbar toggler to the left of my screen?
Here is my HTML code:
<header class="main-navbar">
<div class="nav-toggler">
<span></span>
<span></span>
<span></span>
</div>
<div class="brand">
<a class="logo-link" href="#">
<img src="imgs/logo/logo-lightgrey.png" alt="logo-brand-image">
</a>
</div>
</header>
Here is my css code:
.main-navbar {
position:fixed;
display: flex;
justify-content: center;
align-items: center;
height: 3.5rem;
width: 100%;
font-weight: 500;
}
.nav-toggler {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 1rem;
cursor: pointer;
}
.nav-toggler span {
width: 1.3rem;
height: 0.17rem;
background: white;
display: block;
}
Push both child elements with margin-right: auto
.main-navbar {
position:fixed;
display: flex;
justify-content: center;
align-items: center;
height: 3.5rem;
width: 100%;
font-weight: 500;
background-color: #000;
}
.nav-toggler {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 1rem;
cursor: pointer;
}
.nav-toggler span {
width: 1.3rem;
height: 0.17rem;
background: white;
display: block;
}
/**/
.nav-toggler,
.brand {
margin-right: auto;
}
<header class="main-navbar">
<div class="nav-toggler">
<span></span>
<span></span>
<span></span>
</div>
<div class="brand">
<a class="logo-link" href="#">
<img src="https://www.placehold.it/100x50" alt="logo-brand-image">
</a>
</div>
</header>
I'm not sure there is a pure flex solution for this. You may need to try adding position: absolute to .nav-toggler instead. This will remove the toggler from the overall flow and allow the logo to sit in the centre unaffected.
.main-navbar {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
height: 3.5rem;
width: 100%;
font-weight: 500;
background: black;
}
.nav-toggler {
position: absolute;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 1rem;
cursor: pointer;
margin-left: 1rem;
}
.nav-toggler span {
width: 1.3rem;
height: 0.17rem;
background: white;
display: block;
}
.brand img {
display: block; /* not necessary, just added to vertically align image for demo */
}
<header class="main-navbar">
<div class="nav-toggler">
<span></span>
<span></span>
<span></span>
</div>
<div class="brand">
<a class="logo-link" href="#">
<img src="https://placeimg.com/150/30/animals" alt="logo-brand-image">
</a>
</div>
</header>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
How to remove margin space around body or clear default css styles
(7 answers)
How can I get rid of margin around my HTML content?
(5 answers)
Closed 3 years ago.
I ran into this problem while learning CSS. I tried to search for this but couldn't find any proper answers. Some lead me to margin collapsing, but it just doesn't happen to horizontal margins.
#nav-bar {
position: fixed;
top: 0px;
left: 0px;
height: 60px;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #be3144;
}
#nav-list {
display: flex;
margin-right: 4rem;
}
.nav-link {
text-decoration: none;
color: white;
padding: 0 1.6rem 0 1.6rem;
height: 60px;
weight: 100%;
display: flex;
align-items: center;
font-size: 1.3rem;
}
#welcome-section {
background-color: #3a3d40;
height: 100vh;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
margin-top: 60px;
}
<nav id="nav-bar">
<div id="nav-list">
About
Work
Contact
</div>
</nav>
<section id="welcome-section">
<h1>Hey I am Mimic</h1>
<h4>a web developer</h4>
</section>
The #welcome-section below nav-bar has blank space both left and right sides, though I didn't set any margin properties.
Also, any advices and suggestions in styling HTML/CSS are appreciated. Thanks in advance.
It's because the <body> of the page has margin as default.
Get rid of that by adding the below, and it should work...
body {
margin:0;
}
body {
margin:0;
}
#nav-bar {
position: fixed;
top: 0px;
left: 0px;
height: 60px;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #be3144;
}
#nav-list {
display: flex;
margin-right: 4rem;
}
.nav-link {
text-decoration: none;
color: white;
padding: 0 1.6rem 0 1.6rem;
height: 60px;
weight: 100%;
display: flex;
align-items: center;
font-size: 1.3rem;
}
#welcome-section {
background-color: #3a3d40;
height: 100vh;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
margin-top: 60px;
}
<nav id="nav-bar">
<div id="nav-list">
About
Work
Contact
</div>
</nav>
<section id="welcome-section">
<h1>Hey I am Mimic</h1>
<h4>a web developer</h4>
</section>
Does anyone know how to align an <hr> element inside a flex-container. When I do flex-start all of the other elements align, apart from the <hr>. I need a solution that doesn't use position: absolute on the <hr> element because this affects the document flow and causes other issues.
codepen: https://codepen.io/emilychews/pen/QaPQaW
CSS
body {margin: 0; padding: 0;}
.box {
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
display: block;
background: white;
height: 3px;
width: 75px;
margin-left: 0 auto;
}
HTML
<div class="box">
<h1> Hello </h1>
<hr>
<p> Thanks </p>
</div>
The hr element has a default margin set, and in Chrome it is set to:
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
And as auto margin's in Flexbox override the justify-content/align-* properties, you need to remove it, which e.g. margin: 0; will, and make the in this case align-items: flex-start; be properly applied.
Stack snippet
body {margin: 0; padding: 0;}
.box {
color: white;
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
background: white;
height: 3px;
width: 75px;
align-self: flex-start;
margin: 0; /* added */
}
<div class="box">
<h1>Hello</h1>
<hr>
<p>Thanks</p>
</div>
Change your hr to
background: white;
height: 3px;
width: 75px;
margin-left: 0;