Placing footer elements - html

Question

I am currently working on a school assignment where we can only use HTML + CSS (and PHP to include repeated elements, navbar + footer in this case).
For the footer I would like to place 3 elements in the 'Left' - 'Center' - 'Right' part of the footer.
Left: A newsletter bar to enter e-mail with a SIGN UP button
Center: 3 line text - Address, contact, opening hours.
Right: 2 icons - 1 for school and 1 for business'.
This is my code:
HTML:
<footer>
<div class="footer">
<p class="left">Sign up botton here</p>
<p class="right">School - business here</p>
<p class="centered">3 lines with address, contact info, and opening hours.</p>
</div>
CSS:
.left{
text-align:left;
float:left;
}
.right{
float:right;
text-align:right;
}
.centered{
text-align:center;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#052D48;
}
.footer p {
color: #fff;
font-size: 8px;
}
How would I go about this? I've been reading and trying stuff for hours, but I just get more confused.
i.imgur.com/6IFJnxF.png Here is a picture of what I have in mind
Hope someone can help me in the right direction, thanks a lot!

Answer 1

Using flexbox and wrapping everything inside a container and a row with a 100% width. Then divide each block by X percentage. I changed the p tags with an unordered list.
.row{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.left{
width: 33%;
height: 40px;
}
.right{
width: 33%
}
.right ul{
list-style: none;
color: white;
}
.middle{
width: 33%
}
.centered{text-align:center;}
.flex{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.flex-column{
display: flex;
flex-direction: column;
}
.footer {
padding: 20px 10px;
background:#052D48;
}
.footer p{
font-size: 1.3em;
color: #ffffff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<footer>
<div class="footer">
<div class="row">
<div class="left flex">
<input type="text" class="" placeholder="Email">
<input type="submit" class="" value="Submit">
</div>
<div class="right centered ">
<ul class="flex-column">
<li><i class="fa fa-map-marker" aria-hidden="true"></i> Address.</li>
<li><i class="fa fa-phone" aria-hidden="true"></i> Contact Info</li>
<li><i class="fa fa-clock-o" aria-hidden="true"></i> Opening Hours.</li>
</ul>
</div>
<div class="middle centered">
<p class="">School - business here</p>
</div>
</div>
</div>
</footer>

Answer 2

I would recommend taking the class off of footer and just use the footer tag to target the parent container. Then I would use div tags for each section instead of p tags, putting p tags inside the div. And my last recommendation, although your professor will think you're cheating, is to use flexbox. Enjoy.
Also the box-sizing: border-box; is for the padding I added to the footer so it will still be width: 100%; instead of 100% + 40px
* {
box-sizing: border-box;
}
.left {}
.centered {}
.centered p {}
.right {}
footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background: #052D48;
}
footer p {
margin: 0;
color: green;
font-size: 8px;
}
<footer>
<div class="left">
<p>Sign up botton here</p>
</div>
<div class="centered">
<p>1 line</p>
<p>2 line</p>
<p>3 line</p>
</div>
<div class="right">
<p>School - business here</p>
</div>
</footer>

Answer 3

here is one idea.
https://jsfiddle.net/gztLhdk4/2/
you can customize it more based on your needs.
<footer>
<div class="footer">
<div class="left padd">
<p>
Sign up botton here
</p>
<p>
<input type="text"> <button>sign up </button>
</p>
</div>
<div class="centered padd">
<p>
rttertertert<br>
gereryrt ytyt<br>
tryryrytru
</p>
</div>
<div class="right padd">
<div>
school
</div>
<div>
business
</div>
</div>
</div>
</footer>
.left{
text-align:left;
float:left;
}
.right{
float:right;
text-align:right;
}
.centered{
text-align:center;width:50%;float:left;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#052D48;
}
.footer p {
color: #fff;
font-size: 8px;
}
.padd{padding:5px;color:#fff;}