Reputation: 61
Im trying to put the "Vaccet" picture as a footer but, it keeps on going next to the "UPM" picture.
I have tried removing the footer from the body. On the other websites I've made, the contents of the footer goes under the section above it but this goes next to it.
.column-2 {
float: left;
width: 33.3%;
padding: 5px;
padding-right: 30px;
display: inline-block;
}
.column-3 {
float: right;
width: 30%;
display: inline-block;
padding-right: 30px;
padding
}
.section-team{
text-align: center;
}
.members{
border-radius: 50%;
}
.upm{
padding-top: 25px;
padding-right: 5px;
}
footer{
padding: 50px;
font-size: 80%;
}
.footer-nav{
display: inline-block;
width: 100%
}
<section class="section-team" id="team">
<div class="row">
<h2>team members</h2>
</div>
<div class="column-2">
<img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
<h3>Adam</h3>
</div>
<div class="column-2">
<img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
<h3>Adam</h3>
</div>
<div class="column-2">
<img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
<h3>Adam</h3>
</div>
<div class="column-2">
<img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
<h3>Adam</h3>
</div>
<div class="column-2">
<img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
<h3>Adam</h3>
</div>
<div class="column-2">
<img src="img/faceexample.jpg" class="members" alt="members" style="width:50%">
<h3>Adam</h3>
</div>
<div class="column-3">
<img src="img/upm.jpg" class="upm" alt="upm" style="width:30%">
<h4>UPM</h4>
</div>
</section>
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<img src="img/Vaccet.jpg" alt="vaccet logo"
class="logo">
</ul>
</div>
</div>
I hope someone can show me how to fix the footer problem
Upvotes: 0
Views: 55
Reputation: 4267
This is a flowing issue. Footer sees the space and tries to squeeze itself within that space.
Try:
footer{
clear: both;
}
Otherwise: you might want to give a width: 100%
to your Section.
Upvotes: 0
Reputation: 4938
I think the issue is that the <section>
is not clearfix-ed. When using float
elements, it is essential that you clearfix the container (.section-team
in this case)
Try the following CSS (The Clearfix Hack):
.section-team:after,.section-team:before{
content:''
clear:both;
display:table;
}
Upvotes: 1