-2

When I try to set a footer, it appears above the 3 images that I positioned side by side in CSS. Does anyone know how I can solve the problem unique to my code?

.service{
    top: 550px;
    background-color: rgba(51,51,51,0.7);
    font-size: 18px;
    color: white;
    width: 250px;
    margin: 1%;
    padding: 1%;
    height: 150px;
    position: absolute;
    clear: both;
}
.service:nth-child(1){
  left: 15%;      
}
.service:nth-child(2){
    left: 39%;
}
.service:nth-child(3){
    left: 63%;
}
.raining{
    top: 724px;
    width: 270px;
    position: absolute;
    clear: both;
}
.raining:nth-child(1){
  left: 16%;      
}
.raining:nth-child(2){
    left: 40%;
}
.raining:nth-child(3){
    left: 64%;
} 
<div class="services">
  <div class="service">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    </p>
  </div>    
  <div class="service">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    </p>
  </div>    
  <div class="service">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    </p>
  </div> 
 </div> 
<div class="rainings">
  <div class="raining">          
    <p><img src="img/leafs.jpg" width="277x"></p> 
  </div>     
  <div class="raining">     
   <p><img src="img/puddle.jpg" width="277px"></p>
  </div>    
  <div class="raining">    
    <p><img src="img/ducks.jpg" width="277px"></p>
  </div>    
</div>
Rob
  • 14,746
  • 28
  • 47
  • 65
Bracha L. Sicherman
  • 9
  • 3
  • Where is the footer in your HTML code? The `clear` property doesn't work unless it is used with floats: [clear](https://tympanus.net/codrops/css_reference/clear/). Why aren't you using some kind of grid for images? – Antonija Šimić Dec 18 '18 at 20:15
  • `

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

    footer here `     –  Dec 18 '18 at 20:18

1 Answers1

1

You need to swap the 'top' value of service and raining. Replace your CSS with my code. The element you need to above needs to have a lower top value since the 'top' attribute decides the position starting from the top of the page.

.service{
    top: 724px;
    background-color: rgba(51,51,51,0.7);
    font-size: 18px;
    color: white;
    width: 250px;
    margin: 1%;
    padding: 1%;
    height: 150px;
    position: absolute;
    clear: both;
}
.raining{
    top: 724px;
    width: 270px;
    position: absolute;
    clear: both;
}
.service:nth-child(1){
  left: 15%;      
}
.service:nth-child(2){
    left: 39%;
}
.service:nth-child(3){
    left: 63%;
}
.raining:nth-child(1){
  left: 16%;      
}
.raining:nth-child(2){
    left: 40%;
}
.raining:nth-child(3){
    left: 64%;
}

I would not suggest using you rmethod for positioning though. You should look into flexbox or gridbox.

Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
Yash009
  • 523
  • 4
  • 18
  • Thanks. I don't know how to position a grid or flex over a background though. – Bracha L. Sicherman Dec 20 '18 at 15:07
  • Flexbox and grid box are used to create layouts, while things like padding, margin, and position are used for minute positioning. Here you have used positioning to create a complete layout which is not a sustainable way of development and prone to many errors. I suggest you start using 'bootstrap' at the very least :) which is a type of grid layout. You can use my code for now though I think it should work. – Yash009 Dec 20 '18 at 15:43