I have a small problem with my footer for a website I have made. So there is 2 sections:
- On the top: .footer-sections with 3 div
- On the bottom: .footer-bottom with just a p
image here
I figured out what is the problem but I don't know how to fix it: the first child of .footer-sections is denser and it is taking more than 1/3 of the space (I am guessing).
.footer {
text-align: center;
background-color: #333;
color: #fff;
padding: 50px;
bottom: 0;
width: 100%;
}
.footer .footer-sections {
display: flex;
justify-content: space-between;
}
.footer .footer-sections div {
padding: 2rem 0rem;
top: 0;
}
.footer .footer-sections p {
font-size: 14px;
}
.footer .footer-bottom {
text-align: center;
}
.footer .footer-bottom p {
font-size: 14px;
}
.footer ul {
list-style: none;
}
.footer ul li {
font-size: 14px;
color: #fff;
}
<div class="footer">
<div class="footer-sections">
<div class="adress-footer">
<h4>Contact</h4>
<p>102, Pyidaungsu Yeithka Road, Yangon, Myanmar</p>
<p>+33 6 24 15 14 02</p>
<p>contact#hrasia.com</p>
</div>
<div class="menu-footer">
<h4>Operating Hours</h4>
<p>Monday - Friday : 8 a.m - 5 p.m</p>
<p>Saturday : 9 a.m - 1 p.m</p>
<p>Sunday : closed</p>
</div>
<div>
<h4>Blog</h4>
<p>Read our latest posts</p>
<p>How to write a resume ?</p>
<p>The interview process</p>
</div>
</div>
<div class="footer-bottom">
<p>© hrasia.com | Designed by Lorem</p>
</div>
</div>
You can easily fix that using flex;
just add
.footer .footer-sections div{
// Thanks to Rickard Elimää
max-width: calc(100% / 3)
}
This would solve your issue.
You can check it here as well : https://codepen.io/bhanusinghR/pen/bGbqdbm?editors=1100
First off: because you got padding, flex needs to know about the width of the div, excluding the padding, so you need to add box-sizing: border-box to take that into account.
You also need to tell the footer sections that they should take out an equal amount of space. You do that by adding flex: 1 to them.
I also added border: 1px solid #fff to make it a little bit easier to see the result. Try removing box-sizing: border-box from .footer to see the difference.
.footer {
text-align: center;
background-color: #333;
color: #fff;
padding: 50px;
bottom: 0;
width: 100%;
box-sizing: border-box; /* ADDED */
}
.footer .footer-sections {
display: flex;
justify-content: space-between;
}
.footer .footer-sections div {
padding: 2rem 0rem;
top: 0;
border: 1px solid #fff;
flex: 1; /* ADDED */
}
.footer .footer-sections p {
font-size: 14px;
}
.footer .footer-bottom {
text-align: center;
}
.footer .footer-bottom p {
font-size: 14px;
}
.footer ul {
list-style: none;
}
.footer ul li {
font-size: 14px;
color: #fff;
}
<div class="footer">
<div class="footer-sections">
<div class="adress-footer">
<h4>Contact</h4>
<p>102, Pyidaungsu Yeithka Road, Yangon, Myanmar</p>
<p>+33 6 24 15 14 02</p>
<p>contact#hrasia.com</p>
</div>
<div class="menu-footer">
<h4>Operating Hours</h4>
<p>Monday - Friday : 8 a.m - 5 p.m</p>
<p>Saturday : 9 a.m - 1 p.m</p>
<p>Sunday : closed</p>
</div>
<div>
<h4>Blog</h4>
<p>Read our latest posts</p>
<p>How to write a resume ?</p>
<p>The interview process</p>
</div>
</div>
<div class="footer-bottom">
<p>© hrasia.com | Designed by Lorem</p>
</div>
</div>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 10 months ago.
In my case, flexbox method works very well for centering the navbar as the navbar has fixed positioning. What I don't want is the other div that's at the same level as the div I am having centered skew the div I want centered; I want it centered to the entire document, not just the area of the parent div that it is allowed.
body {
margin:0;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
font-family:'Smooch Sans';
font-size:1.2em;
}
.navbar-item {
float: left;
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 6px 13px;
text-decoration: none;
margin:0.5rem;
border-radius:10px;
transition: 0.4s;
}
.navbar a:hover:not(.active) {
background-color: #111;
}
.navbar a.active:hover { background-color:#048f5c;
}
.active {
background-color: #04AA6D;
}
div.navbar-options {
position:relative;
display: flex;
align-items: center;
justify-content: center;
}
div#navbar-left-title {
color:white;
}
<!DOCTYPE html>
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap');
</style>
</head>
<body>
<div class="navbar">
<div id="navbar-left-title" style="width:fit-contents;float:left;">The Website Name</div>
<div class="navbar-options">
<div class="navbar-item"><a class="active" href="#home">Home</a></div>
<div class="navbar-item">News</div>
<div class="navbar-item">Contact</div>
<div class="navbar-item">About</div>
</div>
</div>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
</div>
</body>
</html>
this is all of the code. Sorry all the styling clogs it up. So I don't want the div#navbar-left-title to skew the div.navbar-options off the absolute center, in conclusion. Haven't been able to find any solution!
link to the general idea off of tesla
A simple solution is to add position: absolute to #navbar-left-title as below.
body {
margin: 0;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
font-family: 'Smooch Sans';
font-size: 1.2em;
}
.navbar-item {
float: left;
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 6px 13px;
text-decoration: none;
margin: 0.5rem;
border-radius: 10px;
transition: 0.4s;
}
.navbar a:hover:not(.active) {
background-color: #111;
}
.navbar a.active:hover {
background-color: #048f5c;
}
.active {
background-color: #04AA6D;
}
div.navbar-options {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
div#navbar-left-title {
color: white;
width: fit-contents;
float: left;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap');
</style>
</head>
<body>
<div class="navbar">
<div id="navbar-left-title">The Website Name</div>
<div class="navbar-options">
<div class="navbar-item"><a class="active" href="#home">Home</a></div>
<div class="navbar-item">News</div>
<div class="navbar-item">Contact</div>
<div class="navbar-item">About</div>
</div>
</div>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
</div>
</body>
</html>
A more complicated solution would be to set up a grid with three columns such as
<navbar>
<div class="left">
...
</div>
<div class="center">
...
</div>
<div class="right">
...
</div>
</navbar>
and set it up so that left and right have the same width always, so the center element can fill the remaining space.
I am trying to get this kind of effect to display a date
I am using flex and text transform, but am struggling to get it right. I cannot get rid of the extra width to the right of the year.
This is my current result.
Here is my code:
.event {
display: flex;
gap: 20px;
margin-bottom: 5px;
}
.date {
border-radius: 5px;
letter-spacing: 1.2px;
background-color: #f6f5f0;
color: #d8d6c8;
padding: 5px;
}
.date .dayAndMonth {
display: inline-block;
}
.date .month {
text-align: center;
font-size: 13px;
}
.date .day {
text-align: center
}
.date .year {
display: inline-block;
transform-origin: 0 0;
transform: rotate(-90deg);
position: relative;
top: 18px;
}
.event_details {}
<article class="event">
<div class="date">
<div class="dayAndMonth">
<div class="month">Feb</div>
<div class="day">04</div>
</div>
<div class="year">2022</div>
</div>
<div class="event_details">
<div class="title">Event Title</div>
</div>
</article>
I would recommend to use writing-mode: vertical-lr; for more details
.event {
display: flex;
gap: 20px;
margin-bottom: 5px;
}
.date {
border-radius: 5px;
letter-spacing: 1.2px;
background-color: #f6f5f0;
color: #d8d6c8;
padding: 5px;
/*Added css*/
display: flex;
align-items: center;
}
.date .dayAndMonth {
display: inline-block;
}
.date .month {
text-align: center;
font-size: 13px;
}
.date .day {
text-align: center;
}
.date .year {
display: inline-block;
writing-mode: vertical-lr; // use this css
position: relative;
}
.event_details {}
<article class="event">
<div class="date">
<div class="dayAndMonth">
<div class="month">Feb</div>
<div class="day">04</div>
</div>
<div class="year">2022</div>
</div>
<div class="event_details">
<div class="title">Event Title</div>
</div>
</article>
It's because of position relative that anchors .year in the .date container. It will still take space there as it is relative to that position making the container adjust it's dimension to accommodate the .year. There're two ways that I can think of. First, is fix the dimensions of .date: height and width then reposition the right and top of the .year. Or you could just use position: absolute; on .year, just set the parent container's width: 50; and adjust the top property to reposition. See the snippet below:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.event {
display: flex;
gap: 20px;
margin-bottom: 5px;
padding: 1rem;
}
.date {
border-radius: 5px;
letter-spacing: 1.2px;
background-color: #f6f5f0;
color: #d8d6c8;
padding: 5px;
width: 50px;
}
.date .dayAndMonth {
display: inline-block;
}
.date .month {
text-align: center;
font-size: 13px;
}
.date .day {
text-align: center
}
.date .year {
display: inline-block;
transform-origin: 0 0;
transform: rotate(-90deg);
position: absolute;
top: 55px;
}
.event_details {}
<article class="event">
<div class="date">
<div class="dayAndMonth">
<div class="month">Feb</div>
<div class="day">04</div>
</div>
<div class="year">2022</div>
</div>
<div class="event_details">
<div class="title">Event Title</div>
</div>
</article>
More on positions here.
Solution
Add a value for width to .year in your CSS. That is
.date .year {
/* ... (other styles) */
width: 20px; /* newly added value for width */
}
Explanation
On rendering your HTML/CSS code, the browser kind of calculates the widths of elements. At this point, the width of the .year div (containing 2022) has been set. After the rotation is rendered, the width was still retained hence the extra space at the right.
So explicitly setting the width removes the extra space to the right of the vertical 2022.
Note
You may want to set the font sizes of .month, .day, and .year to be sure that their values are not distorted or superimposed on each other when your page is rendered in a browser where the user has scaled up font sizes.
I am trying to add margin-top to separate the heading from the rest of the content, but every time I do so the content moves down more. I used a flexbox to center the items, but I can't add margin-top to it because when I do it affects the flexbox property I added to it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.8%;
}
body {
background: #FFF8DC;
}
.wrapper-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.content-content h2 {
font-size: 2.1rem;
}
p {
font-size: 1.3rem;
}
<div class="wrapper-container">
<div class="content-content">
<h2>Black Jack</h2>
<p id="message-el">Want to play a round</p>
<p>Cards:</p>
<p>Sum:</p>
</div>
</div>
I'm not sure if I understood you right. to separate heading from the rest you need margin-bottom as I added in the snippet .
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.8%;
}
body {
background: #FFF8DC;
}
.wrapper-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.content-content h2 {
font-size: 2.1rem;
margin-bottom:2rem;
}
p {
font-size: 1.3rem;
}
<div class="wrapper-container">
<div class="content-content">
<h2>Black Jack</h2>
<p id="message-el">Want to play a round</p>
<p>Cards:</p>
<p>Sum:</p>
</div>
</div>
Another way to do it is by simply adding a break
<div class="wrapper-container">
<div class="content-content">
<h2>Black Jack</h2>
<br>
<p id="message-el">Want to play a round</p>
<p>Cards:</p>
<p>Sum:</p>
</div>
</div>
Use margin-bottom:20px; or padding-bottom:20px; to the h2 element to separate the heading from rest of the content in your flexbox.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.8%;
}
body {
background: #FFF8DC;
}
.wrapper-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.content-content h2 {
font-size: 2.1rem;
padding-bottom:20px;
}
p {
font-size: 1.3rem;
}
<div class="wrapper-container">
<div class="content-content">
<h2>Black Jack</h2>
<p id="message-el">Want to play a round</p>
<p>Cards:</p>
<p>Sum:</p>
</div>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
<style>
body {
font-family: Arial, sans-serif;
}
header, footer {
display: flex;
flex-direction: row;
}
header .profile-thumbnail {
width: 50px;
height: 50px;
border-radius: 4px;
}
header .profile-name {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 10px;
}
header .follow-btn {
display: flex;
justify-content:center;
margin: 0 0 0 auto;
}
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
display: flex;
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
footer .stats {
display: flex;
font-size: 15px;
}
footer .stats strong {
font-size: 18px;
}
footer .stats .likes {
margin-left: 10px;
}
footer .cta {
margin-left: auto;
}
footer .cta button {
border: 0;
background: transparent;
}
</style>
<header>
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>#ossia</h4>
</div>
<div class="follow-btn">
<button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
<button class="retweet-btn">Retweet</button>
<button class="like-btn">Like</button>
</div>
</footer>
So my question is, before I add Justify-content:center; to header .follow-btn, the button remains ont he left, if I add any justify type of data to this it goes to the right. Wether I use center or whatever. My question is Why?. I'm trying to learn the basics and this is a bit confusing considering I just finished the course stating that justify content center should push it to the middle of the x axis, but isn't.
You are having: margin: 0 0 0 auto; into header .follow-btn that will align your button to the right because it will add a full margin to the left no matter what as your header is set with display:flex;.
Make margin like: margin: auto 0; if you want to align it horizontaly.
<style>
body {
font-family: Arial, sans-serif;
}
header, footer {
display: flex;
flex-direction: row;
}
header .profile-thumbnail {
width: 50px;
height: 50px;
border-radius: 4px;
}
header .profile-name {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 10px;
}
header .follow-btn {
display: flex;
justify-content:center;
margin: auto 0;
padding-left: 10px;
}
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
display: flex;
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
footer .stats {
display: flex;
font-size: 15px;
}
footer .stats strong {
font-size: 18px;
}
footer .stats .likes {
margin-left: 10px;
}
footer .cta {
margin-left: auto;
}
footer .cta button {
border: 0;
background: transparent;
}
</style>
<header>
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
<h3>Quincy Larson</h3>
<h4>#ossia</h4>
</div>
<div class="follow-btn">
<button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
<div class="Retweets">
<strong>107</strong> Retweets
</div>
<div class="likes">
<strong>431</strong> Likes
</div>
</div>
<div class="cta">
<button class="share-btn">Share</button>
<button class="retweet-btn">Retweet</button>
<button class="like-btn">Like</button>
</div>
</footer>
I have the code below.
I want to:
align the top of the placeholder image, with the top of the Link1.
the links to remain centered with the button
R1 Link and the button to be to right
.header {
background-color:green;
display: flex;
margin: 0 auto;
max-width: 40rem;
}
.navbar {
display: flex;
justify-content: space-between;
}
.navbar__items {
align-items: center;
display: flex;
}
.navbar__items > * {
margin-right: 0.75rem;
text-decoration: none;
}
.navbar__items & > *:last-child {
margin-right: 0;
}
.button {
background: red;
border-radius: .1875rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1rem;
letter-spacing: .0625rem;
padding: .375rem .75rem;
}
<div class="header">
<div><img src="https://via.placeholder.com/50" /></div>
<div>
<div class="navbar">
<div class="navbar__items">
Link 1
Link 2
Link 3
Link 4
</div>
<div class="navbar__items">
Link R1
<a class="button" href="">Button</a>
</div>
</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in<div>
</div>
</div>
</div>
to put the button on the right you have to set your navbar to 100% and give automatic margin-right on your left nav. like in the example below.
I didn't understand what you're trying to achieve with the image so if you could give more details, I could try to help.
.header {
background-color:green;
display: flex;
}
.navbar {
width: 100%;
display: flex;
justify-content: space-between;
}
.navbar__items {
align-items: center;
display: flex;
}
.navbar__items > * {
margin-right: 0.75rem;
text-decoration: none;
}
.navbar__items & > *:last-child {
margin-right: 0;
}
.button {
background: red;
border-radius: .1875rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1rem;
letter-spacing: .0625rem;
padding: .375rem .75rem;
}
.bar-left {
margin-right: auto;
}
img{
position:absolute;
top:16px;
}
<div class="header">
<div></div>
<div class="navbar">
<div class="bar-left navbar__items">
<img src="https://via.placeholder.com/50" />
Link 1
Link 2
Link 3
Link 4
</div>
<div class="navbar__items">
Link R1
<a class="button" href="">Button</a>
</div>
</div>
</div>
If I understood your needs, this would be what you're looking for? I had to define an explicit height to your header since there's nothing in flexbox that can align an item to the top of other item, it can align items to the baseline, but I think that's not what you want.
So I had to allow for a size that can place the image at the end of the flex container vertically so it aligns with the top of the text. Let me know!
.header {
background-color:green;
display: flex;
height: 89px;
}
.navbar {
display: flex;
justify-content: space-between;
width: 100%;
}
.navbar__items {
align-items: center;
display: flex;
vertical-align: text-top;
}
.navbar__items > * {
margin-right: 0.75rem;
text-decoration: none;
}
.navbar__items & > *:last-child {
margin-right: 0;
}
.button {
background: red;
border-radius: .1875rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1rem;
letter-spacing: .0625rem;
padding: .375rem .75rem;
}
.right {
margin-left: auto;
}
.image {
display:block;
}
.box {
align-self: flex-end;
}
<div class="header">
<div class="box"><img src="https://via.placeholder.com/50" class="image"/></div>
<div class="navbar">
<div class="navbar__items">
Link 1
Link 2
Link 3
Link 4
</div>
<div class="navbar__items right">
Link R1
<a class="button" href="">Button</a>
</div>
</div>
</div>