How do you position text on footer directly under each other? - html

Question

I would like to know how position my text on footer directly under each other in three different column
right now only the left column is good the center and the right column are broken
.footer {
/* The dividing footer: */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 200px;
background-color: #efebe785;
color: #000000;
text-align: center;
border: 1px solid #00000094;
}
.left {
text-align: left;
float: left;
top: 1em;
left: 1em;
}
.right {
float: right;
text-align: right;
top: 1em;
right: 1em;
position: relative;
display: inline;
}
.centered {
text-align: center;
top: 1em;
position: relative;
display: inline;
padding
}
<div class="footer">
<div class="left">
<p class="left">
<font size="5">SOCIAL</font> <br/><br/>
<font size="3">Facebook </font> <br/><br/>
<font size="3"> Twitter </font> <br/><br/>
<font size="3"> Youtube </font>
</p>
</div>
<div class="right">
<p class="right">
<font size="5">EXTRA</font> <br/><br/>
<font size="3">Our Chefs</font>
</p>
</div>
<div class="center">
<p class="centered">
<font size="5">SUPPORT</font> <br/><br/>
<font size="3">Tellphone</font> <br/><br/>
<font size="3">Email</font>
</p>
</div>
</div>

Answer 1

The text isn't aligned correctly in the center and right columns because they have the text alignment of center and right instead of left.
Rather than building your columns using text alignment, you can set them all to be a third of the parent's width, and give them all left-aligned text. See the following snippet.
.footer {
/* The dividing footer: */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 200px;
background-color: #efebe785;
color: #000000;
/* Align all the text left so it lines up */
text-align: left;
border: 1px solid #00000094;
}
/* Build 3 equal-width columns inside the footer */
.left,
.right,
.center {
float: left;
width: 33.333%;
position: relative;
box-sizing: border-box;
padding-right: 15px;
padding-left: 15px;
}
<div class="footer">
<div class="left">
<p class="left">
<font size="5">SOCIAL</font> <br/><br/>
<font size="3">Facebook </font> <br/><br/>
<font size="3"> Twitter </font> <br/><br/>
<font size="3"> Youtube </font>
</p>
</div>
<div class="right">
<p class="right">
<font size="5">EXTRA</font> <br/><br/>
<font size="3">Our Chefs</font>
</p>
</div>
<div class="center">
<p class="center">
<font size="5">SUPPORT</font> <br/><br/>
<font size="3">Tellphone</font> <br/><br/>
<font size="3">Email</font>
</p>
</div>
</div>

Answer 2

When you have a list of items, it's a very good practice to use <li></li> tag. In this case, you have links, and for link destination, you should use . Each HTML Tag is created for a specific purpose.
And, for the columns layout, I have used CSS Grid Layout.
Grid Layout its very powerful, it helps you to organize your layout in many different ways. You just have to specify to a parent element display: grid;, and add here how you want to display columns. In our case, we have three columns, and these columns have same width, so, I have added grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
Fr is a fractional unit and 1fr is for 1 part of the available space
For a better reference, I would suggest this: Complete Guide To CSS Grid System
Hope I've been clear!
Your code structure should look something like this:
.footer {
/* The dividing footer: */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 200px;
background-color: #efebe785;
color: #000000;
text-align: center;
border: 1px solid #00000094;
padding: 0 20px;
}
ul {
padding: 0;
}
ul li {
list-style: none;
}
.links {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.links li {
margin-bottom: 10px;
}
.link-item {
padding: 0;
text-align: left;
}
.link-item.centered {
text-align: center;
}
.link-item.right-aligned {
text-align: right;
}
.link-item a {
color: #333;
font-size: 16px;
text-decoration: none;
}
.link-item a:hover {
color: blue;
}
<div class="footer">
<div class="links">
<div class="link-item">
<h3>Social</h3>
<ul>
<li>
Facebook
</li>
<li>
Twitter
</li>
<li>
Youtube
</li>
</ul>
</div>
<div class="link-item centered">
<h3>Support</h3>
<ul>
<li>
Tel
</li>
<li>
Email
</li>
</ul>
</div>
<div class="link-item right-aligned">
<h3>Extra</h3>
<ul>
<li>
Our Chefs
</li>
</ul>
</div>
</div>

Answer 3

This is the css you need (use flex):
.footer{
/* The dividing footer: */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height:200px;
background-color: #efebe785;
color: #000000;
text-align: center;
border:1px solid #00000094;
display: flex;
}
.left, .center, .right{
flex-grow:1
}
https://jsfiddle.net/8wxn9sp4/