Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Mark Libario
Mark Libario
9,003 Points
Posted by Mark Libario
Mark Libario
9,003 Points

Why does all my divs break and overlap :((

Im trying to create a one page with 3 or 4 fluid divs (covers the entire page) when you scroll down. Each divs have a different css background image.

When I scroll down, the 2nd div just overlap then 2nd and the 3rd overlaps the first and 2nd..

Im using bootstrap4 fluid containers. bootstrap4 css

heres my code: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"><link rel="stylesheet" href="css/style.css">
  </head>
  <body>




    <!-- Jumbotron-->



    <div class="container-fluid jumbo-height">

      <ul class="nav justify-content-end">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

      <div class="container">
        <h1 class="display-2"><strong>JVA Aesthetics </strong></h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>

        <img src="img/janvimar.jpg" class="rounded-circle img-size img-fluid float-right">
        <h4>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</h4>
    </div>




    <!-- /Jumbotron -->

       <div class="container-fluid main-content">
        <h1 class="display-3">Lorem Ipsum</h1>
         <div class="container">
          <div class="row align-items-center">
            <div class="col-4">
              One of three columns
            </div>
            <div class="col-4">
              One of three columns
            </div>
            <div class="col-4">
              One of three columns
            </div>
          </div>


       </div>

      <div class="container-fluid main-content1">
        <h1 class="display-3">Lorem Ipsum Lorem</h1>

       </div>



    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <script src="js/app.js"></script>
  </body>
</html>

Heres my CSS concerning the 3 divs (its the same as the jumbotron but with added height)

.img-size {
  height: 250px;
 width 300px;
 margin-left: 0;
  margin-top: 100px;

}

.display-2 {
  font-family: 'Tangerine', serif;
}

.main-content {
  min-height: 650px;
  background: linear-gradient(black, transparent 60%),
    url("../img/fit-bg1.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 840px;
  color: #fff;
}

.main-content1 {
  min-height: 650px;
  background: linear-gradient(black, transparent 60%),
    url("../img/fit-bg2.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 840px;
  color: #fff;
}


.jumbo-height {
  min-height: 650px;
  background: linear-gradient(black, transparent 60%),
    url("../img/fit-bg3.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 840px;
  color: #fff;
}

Im currently at work and only have IE11 as browser. Could I be the problem? I checked on my phone, it still showed overlapping though..

1 Answer

Tray Denney
PLUS
Tray Denney
Courses Plus Student 12,884 Points
Tray Denney
Tray Denney
Courses Plus Student 12,884 Points

Hey there! Not sure if you figured it out or not but I believe the problem is that you are missing two div closing tags (</div>). One is missing for your 

<div class="container-fluid jumbo-height">

statement on line 22 and one for 

<div class="container-fluid main-content">

on line 52.

I hope this helps!

Mark Libario
Mark Libario
9,003 Points
Mark Libario
Mark Libario
9,003 Points

didnt see that. Thank youu!