CODEWITHSUNDEEP
htmlcss
buttonSmasher96
buttonSmasher96

Reputation: 133

Div takes up entire height of container yet stays at the bottom

I'm having a problem with one of my div's specifically .mid-content. It's taking up the entire height of my outer div .main-content but I want it to be below my other two inner divs .posts and .sidebars. Instead it's to the left side of .sidebars.

I tried making the display of the .mid-content div into a block yet the problem persists. I also tried playing around with the overflow settings in the container div it causes the border of my header to get removed.

Here's my code

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width initial-scale=1">
  </head>
  <body>

    <div class="container">

      <div class="header">
        <ul class="navigation-bar">
          <li class="active"><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>

      <div class="main-content">
        <div class="posts top-buffer">
          <div class="post">
            <h1>A Post About Something</h1>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
            </p>
          </div> 
        </div>

        <div class="sidebars top-buffer">
          <div class="sidebar">
            <h1>Sidebar One</h1>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
            </p>
          </div>
        </div>

        <div class="mid-content">
          <h1>
            This Should be below everything
          </h1>
        </div>

    </div>
  </div>
</body>
</html>

CSS

* {
    margin: 0px;
    padding: 0px;
    font-family: futura;
}

body {
    background-color: #f2f2f2;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 80px;
    background-color: #777777;
    border: 3px solid black;
    border-radius: 5px;
}

.navigation-bar {
    height: 80px;
    width: 80%;

}

.navigation-bar > ul {
    margin: 0 auto;
}

.navigation-bar > li {
    width: 20%; 
    list-style: none;
    float: left;
}

.navigation-bar > li > a {
    display: block;
    color: white;
    line-height: 80px;
    text-align: center;
    text-decoration: none;
}

.navigation-bar a:hover, .navigation-bar a:active, .active {
    background-color: #ff8989;
}

.main-content {
    overflow: hidden;
}

.top-buffer {
    margin-top: 2%;
}

.posts {
    width: 55%;
    float: left;
    border: 3px solid black;
    padding: 2% 4%;
    margin-top: 2%;
    margin-bottom: 4%;
    border-radius: 5px;
    background-color: #ffc893;

}

.sidebars {
    width: 26%;
    float: right;
    border: 3px solid black;
    border-radius: 5px;
    padding: 2% 3%;
    background-color: #b5ffb2;
}

.mid-content {
    width: 100%;
    display: block;
}

Upvotes: 0

Views: 46

Answers (2)

Stephen R. Smith
Stephen R. Smith

Reputation: 3400

Add the clear:both style to your .mid-content class:

.mid-content {
    width: 100%;
    display: inline-block;
    clear: both;
}

That will force the div below both of the columns above it.

Also, change the display from block to inline-block and you can apply margin and padding to the div.

https://plnkr.co/edit/wJp9m0RKxuvAjn71rkFH?p=preview

Upvotes: 2

Super User
Super User

Reputation: 9642

Just use clear: both on .mid-content div. check updated snippet below

* {
    margin: 0px;
    padding: 0px;
    font-family: futura;
}

body {
    background-color: #f2f2f2;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 80px;
    background-color: #777777;
    border: 3px solid black;
    border-radius: 5px;
}

.navigation-bar {
    height: 80px;
    width: 80%;

}

.navigation-bar > ul {
    margin: 0 auto;
}

.navigation-bar > li {
    width: 20%; 
    list-style: none;
    float: left;
}

.navigation-bar > li > a {
    display: block;
    color: white;
    line-height: 80px;
    text-align: center;
    text-decoration: none;
}

.navigation-bar a:hover, .navigation-bar a:active, .active {
    background-color: #ff8989;
}

.main-content {
    overflow: hidden;
}

.top-buffer {
    margin-top: 2%;
}

.posts {
    width: 55%;
    float: left;
    border: 3px solid black;
    padding: 2% 4%;
    margin-top: 2%;
    margin-bottom: 4%;
    border-radius: 5px;
    background-color: #ffc893;

}

.sidebars {
    width: 26%;
    float: right;
    border: 3px solid black;
    border-radius: 5px;
    padding: 2% 3%;
    background-color: #b5ffb2;
}

.mid-content {
    width: 100%;
    display: block;
    clear: both;
    
}
<div class="container">

  <div class="header">
    <ul class="navigation-bar">
      <li class="active"><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </div>

  <div class="main-content">
    <div class="posts top-buffer">
      <div class="post">
        <h1>A Post About Something</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
        </p>
      </div> 
    </div>

    <div class="sidebars top-buffer">
      <div class="sidebar">
        <h1>Sidebar One</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
        </p>
      </div>
    </div>

    <div class="mid-content">
      <h1>
        This Should be below everything
      </h1>
    </div>

  </div>
</div>

Upvotes: 3

Related Questions