Center one div and have 2 other divs stay by it? [duplicate] - html

Question

This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed last month.
I have 3 divs that contain text. The text has different lengths, meaning that if I put these three divs into another div, if I justify-content: center this div, the middle one out of the three divs won't be in the center of the page.
What I want to achieve is to have the middle div in the center of the webpage and the first div to be to left of it and the third one to the right, with no space between (except padding).
Edit: I don't know if I maybe was unclear about what I am asking: I want to center .container-footer-3 but .footer-company ("Center") should be in the center of the page, not in the center of the div.
-> In other words, how do I center the parent div, containing all these 3 divs but not the center of the div to the center page, instead "Center" div to the center of the page?
.container-footer-3 .nav {
display: inline-table;
padding: 0 20px 0 20px;
}
.footer-nav {
display: flex;
justify-content: center;
}
.footer-company{
position: absolute;
left: 50%;
margin-left: -50px;
width: 100px;
height: 100px}
<div class="footer-nav">
<div class="container-footer-3">
<div class="footer-explore nav">
<h20>Left</h20>
<ul>
</ul>
</div>
<div class="footer-company nav">
<h20>Center</h20>
<ul>
</ul>
</div>
<div class="footer-socials nav">
<h20>RightRightRightRight</h20>
<ul>
</ul>
</div>
</div>
</div>

Answer 1

If you want to use flex, then you can make all three divs share the same width by adding flex-basis: 100% to the children within the flex container. I simplified your HTML to better show how it can be done. 100% just states that they are all equally treated. It's not like 100% of width.
You will then need to add an extra div inside .footer-explore if you want to align it to the right.
Do note, I added the outline to make the alignments more clear.
.footer-nav {
display: flex;
justify-content: center;
align-items: top;
}
.nav {
padding: 0 20px 0 20px;
flex-basis: 100%;
}
* {
outline: 1px solid grey;
}
<div class="footer-nav">
<div class="footer-explore nav">
<h20>Left</h20>
</div>
<div class="footer-company nav">
<h20>Center</h20>
</div>
<div class="footer-socials nav">
<h20>RightRightRightRight RightRightRightRight</h20>
</div>
</div>
You can also use a grid, and set the middle column to adapt to it's content, and the two divs on the side to fill up the rest of the space (using 1fr). Again, you need to add an extra div inside .footer-explore if you want to align it to the right. I added an outline here too for clarity.
.footer-nav {
display: grid;
grid-template-columns: 1fr min-content 1fr;
}
.nav {
padding: 0 20px 0 20px;
}
* {
outline: 1px solid grey;
}
<div class="footer-nav">
<div class="footer-explore nav">
<h20>Left</h20>
</div>
<div class="footer-company nav">
<h20>Center</h20>
</div>
<div class="footer-socials nav">
<h20>RightRightRightRight RightRightRightRight</h20>
</div>
</div>

Answer 2

There's already a lot of answers, but I figured I'd give my 2 cents seeing as none of the answers actually show an example where the leftmost and rightmost columns aren't expanded to full width.
In a grid-layout, you can define the 3 columns with:
grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
The first and the last column (left and right) will have their column stretch to fit its content width, while the layout stays a 3-column layout.
The middle column will just have a value of auto.
You can then specify each grid-item's positioning with justify-self, which works in both flex- and grid-layouts - I used flex in my example.
This solution isn't fully responsive, but you can specify e.g. a max-width-value on the grid-items which will make it responsive for most screens, not small screens such as mobile devices though.
.container-footer-3 {
display: grid;
grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
justify-items: center;
grid-gap: 40px;
}
.nav {
padding: 0 20px 0 20px;
border: 1px solid black;
display: flex;
flex-direction: column;
max-width: 150px;
}
.footer-explore {
justify-self: right;
}
.footer-company {
justify-self: center;
}
.footer-socials {
justify-self: left;
}
<div class="footer-nav">
<div class="container-footer-3">
<div class="footer-explore nav">
<h20>Left</h20>
<ul>
</ul>
</div>
<div class="footer-company nav">
<h20>Center</h20>
<ul>
</ul>
</div>
<div class="footer-socials nav">
<h20>RightRightRightRight</h20>
<ul>
</ul>
</div>
</div>
</div>
<div class="footer-nav">
<div class="container-footer-3">
<div class="footer-explore nav">
<h20>Left Left Left Left Left</h20>
<ul>
</ul>
</div>
<div class="footer-company nav">
<h20>Center Center Center</h20>
<ul>
</ul>
</div>
<div class="footer-socials nav">
<h20>Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right </h20>
<ul>
</ul>
</div>
</div>
</div>

Answer 3

#grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
width: 100vw;
height: 100vh;
}
#div1 {
grid-area: 1 / 1 / 2 / 2;
background-color: rgba(29, 240, 35, 0.5);
}
#div2 {
grid-area: 1 / 2 / 2 / 3;
background-color: rgba(213, 209, 50, 0.5);
}
#div3 {
grid-area: 1 / 3 / 2 / 4;
background-color: rgba(158, 43, 127, 0.5);
}
<div id="grid">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>
I don't know if that correspond exactly to what you are looking, but css grid could be your answer

Answer 4

A flex box solution is as follows:
The left and right div are allowed to grow using flex-grow:1; The center is given a flex-grow of 0 so it shrinks. If we set the left and right divs with a flex-basis of 100% then they'll expand to equal size. I've put a red line where the center of the screen is so you can see the center div is actually centered.
.container-footer-3 {
display: flex;
gap: 0.5rem;
}
.container-footer-3 > div {
flex-grow:1;
outline:1px solid blue;
flex-basis:100%;
}
.container-footer-3 > div:first-child {
text-align:right;
}
.container-footer-3 > div:nth-child(2) {
flex-grow:0;
flex-basis:0;
}
.centerline {
border:1px solid red;
height:50px;
width:0px;
position:absolute;
left:50%;
top:0;
}
<div class="footer-nav">
<div class="container-footer-3">
<div class="footer-explore nav">
<h20>Left</h20>
</div>
<div class="footer-company nav">
<h20>Center</h20>
</div>
<div class="footer-socials nav">
<h20>RightRightRightRight</h20>
</div>
</div>
</div>
<div class='centerline'></div>