How to extend container around wrapped elements

Question

How do I extend the container around the wrapped elements so when I put in content it extends automatically? The container is stuck at the top of the page above the header even though the header is wrapped in the container div.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>basic</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div id="container">
       <div id="header">
           <div class="nav_left">
               <a href="#">Home</a>
               <a href="#">About</a>
               <a href="#">Download</a>
               <a href="#">Contact</a>

           </div>
       </div>
               <div id="bigbox">

               </div>


   </div>

</body>
</html>

CSS

html{
}
body{
    margin: 0;
    padding: 0;
    background-color: grey;

}
#container{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
#header{
    width:80%;
}
.nav_left{
    float:left;
    height:30px;
}
#bigbox{
    width:80%;
}

Possible duplicate of [How do you keep parents of floated elements from collapsing?](http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing) — Terry, May 12 '17 at 23:40
You always clear floats in the parent container of floated elements. I added a class you can apply to such parents in the answer below. — Adrianopolis, May 12 '17 at 23:46

score 0 · Answer 1 · answered May 12 '17 at 23:45

You need to clear the floats in your #header element. I have my trusty .clear-floats class:

.clear-floats {
  display: block;
}

.clear-floats:after
{
  content: ".";
  display: block;
  width: 100%;
  height: 0px;
  visibility: hidden;
  clear: both;
}

Add that to your stylesheet and then add class="clear-floats" to your header element.

How to extend container around wrapped elements

1 Answers1