Tryingprogrammer
Tryingprogrammer

Reputation: 61

footer overlapping with contents

Im trying to put the "Vaccet" picture as a footer but, it keeps on going next to the "UPM" picture.

enter image description here

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

Answers (2)

Mosia Thabo
Mosia Thabo

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

Jones Joseph
Jones Joseph

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

Related Questions