Div not expanding with content inside

Question

Basically, in the #main-content div, I would like it to expand, so the de facto content of that div fits inside and is not overlapping, like you see in the codepen.

I don't know how to implement the clearfix solution or the overflow:hidden solution. I've tried but failed.

I don't know why, but the p tag is not overlapping, but the JavaScript/jQuery progress bars are. :/

Codepen: http://codepen.io/DocRow10/pen/hjIkq

Snippet:

 body { margin: 0; } #nav-bar { width: 100%; height: 50px; background-color: rgb(40, 40, 40); border-bottom-style: solid; border-bottom-color: rgb(238, 0, 0); border-bottom-width: 7.5px; padding-top: 14px } #logo { position: relative; bottom: 5px; font-size: 30px; padding-left: 8px; float: left; font-family: bebas; } #word-1 { color: rgb(0, 154, 205); } #word-2 { color: rgb(255, 250, 250); } ul#main-links { list-style: none; margin: 0; padding-right: 50px; float: right; height: 100%; border-bottom: 7.5px solid transparent; display: block; font-size: 0; } ul#main-links li { display: inline-block; text-align: center; border-bottom-style: solid; border-bottom-width: 7.5px; border-bottom-color: rgb(238, 0, 0); color: white; font-family: arcon; font-size: 18px; height: 100%; width: 90px; position: relative; z-index: 2; } a:link { text-decoration: none; } a:visited { text-decoration: none; color: white; } a:active { text-decoration: none; color: white; } a#logo-link { text-decoration: none; } a#logo-link:visited { text-decoration: none; color: inherit; } a#logo-link:active { text-decoration: none; color: inherit; } ul#main-links > a > li > span.word-position { position: relative; top: 5px; } #main-content { background-color: rgb(131, 111, 255); width: 100%; height: 80%; } #background { } h1#page-header { margin: 0; font-family: code; font-size: 45px; text-align: center; padding: 5px 0px; } /* ABOUT */ #pic-container { width: 100%; height: 180px; text-align: center; padding-top: 10px; } #relative { position: relative; display: inline-block; right: 97.5px; } #photo-frame { background-color: royalblue; position: absolute; width: 0px; height: 0px; border-radius: 100px; border-style: solid; border-color: beige; border-width: 0px; top: 90px; left: 90px; } #photo-frame > #picture { width: 100%; height: 100%; background-image: url('Ed.png'); border-radius: 100px; } hr { position: relative; top: 97.5px; margin: 0; border-style: solid; border-color: black; overflow: hidden; height 2px; background-color: black; } .hidari { float: left; } .migi { float: right; } .clear { width: 100%; clear: both; height: 0px; line-height:0px; } #intro { width: 70%; font-family: lato; margin-left: auto; margin-right: auto; text-align: justify; font-size: 17px; line-height: 150%; } #expertise { width: 80%; margin-left: auto; margin-right: auto; text-align: center; } #expertise h1 { font-family: Arial; font-size: 25px; } #expertise h2 { font-family: sinkinsans; font-size: 18px; margin-top: 5px; } #skills { width: 50%; height: 100px; } .skill { } /*-----SKILLS BAR-----*/ .bar { width: 300px; height: 35px; border: 2px solid black; border-radius: 10px; overflow: hidden; } .nil { background-image: url('footer_lodyas.png'); /* Background pattern from subtlepatterns.com */ width: 100%; height: 100%; float: right; overflow: hidden; } ability { width: 77%; height: 100%; background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, red , lime); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, red, lime); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, red, lime); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, red , lime); /* Standard syntax */ border-bottom-right-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 7.5px; border-top-left-radius: 7.5px; /* border-radius: 7.5px; */ } /*--------------------*/ #experience { width: 50%; height: 100px; } /*---------------------------------------------------------------*/ /* CONTACT */ #contact-info { margin-left: auto; margin-right: auto; width: 80%; height: 80%; } #contact-info td { margin-left: auto; margin-right: auto; width: 50%; } #contact-info td > p { text-align: justify; font-family: lato; width: 80%; } .spacer { padding: 10px 0px; } #message-div { height: 150px; } input[type="text"] { width: 100%; height: 27px; padding-left: 5px; font-family: Verdana,Geneva,sans-serif; font-size: 15px; } input[type="text"]:hover, #recipient-message:hover { border-width: 1.5px; border-style: solid; border-color: rgb(152, 245, 255); } input[type="button"] { float: right; margin-top: 7.5px; background-color: rgb(72, 118, 215); border-color: rgb(72, 118, 215); border-radius: 5px; font-size: 15px; color: rgb(230, 230, 255); font-family: Tahoma; } label { font-family: lato; font-size: 18px; } #recipient-message { width: 100%; height: 100%; resize: none; font-family: Verdana,Geneva,sans-serif; font-size: 12.5px; } .form-confirmation { width: 80%; border-style: solid; border-width: 2.5px; border-radius: 5px; border-color: rgb(0, 0, 0); } .invalid-field { box-shadow: 0 0 23px red; -webkit-box-shadow: 0 0 23px red; -moz-box-shadow: 0 0 23px red; } #success { background-color: rgb(0, 210, 0); color: rgb(245, 255, 250); } #failure { background-color: rgb(255, 48, 48); color: rgb(137, 0, 0); } .form-confirmation > p { text-align: center; font-family: codee; font-size: 18px; } #footer { width: 100%; height: 10%; background-color: black; } #footer > p#footer-text { margin: 0; text-align: center; font-family: arial; color: rgb(169, 169, 169); padding-top: 20px; width: 100%; } @font-face { font-family: arcon; src: url(Arcon-Regular.otf); } @font-face { font-family: bebas; src: url(BEBAS___.ttf); } @font-face { font-family: bubblegum; src: url(BubblegumSans-Regular.otf); } @font-face { font-family: code; src: url(Days.otf); } @font-face { font-family: lato; src: url(Lato-Regular.ttf); } @font-face { font-family: codee; src: url(CODE_Bold.otf); } @font-face { font-family: sinkinsans; src: url(SinkinSans-400Regular.otf); } .clear { clear: both; } 

 <div id="container"> <div id="nav-bar"> <div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a></div> <ul id="main-links"> <a href="about.html"><li><span class="word-position">About</span></li></a> <a href="work.html"><li><span class="word-position">Work</span></li></a> <a class href="contact.php"><li><span class="word-position">Contact</span></li></a> </ul> </div> <div id="main-content"> <div id="pic-container"> <div id="relative"> <div id="photo-frame"> <div id="picture"></div> </div> </div> <hr class="hidari" /> <hr class="migi" /> </div> <h1 id="page-header">About Me</h1> <p id="intro">Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! </p> <div id="expertise"> <div id="skills" class="hidari"> <h1>Skills</h1> <div class="skill"> <h2>HTML/CSS</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> </div> <div id="experience" class="migi"> <h1>Experience</h1> </div> <span class="clear"></span> </div> </div> <span class="clear"></span> <div id="footer"> <p id="footer-text"> &#169; 2016. All rights reserved. </p> </div> </div> 

Answer 1

 body { margin: 0; } #nav-bar { width: 100%; height: 50px; background-color: rgb(40, 40, 40); border-bottom-style: solid; border-bottom-color: rgb(238, 0, 0); border-bottom-width: 7.5px; padding-top: 14px } #logo { position: relative; bottom: 5px; font-size: 30px; padding-left: 8px; float: left; font-family: bebas; } #word-1 { color: rgb(0, 154, 205); } #word-2 { color: rgb(255, 250, 250); } ul#main-links { list-style: none; margin: 0; padding-right: 50px; float: right; height: 100%; border-bottom: 7.5px solid transparent; display: block; font-size: 0; } ul#main-links li { display: inline-block; text-align: center; border-bottom-style: solid; border-bottom-width: 7.5px; border-bottom-color: rgb(238, 0, 0); color: white; font-family: arcon; font-size: 18px; height: 100%; width: 90px; position: relative; z-index: 2; } a:link { text-decoration: none; } a:visited { text-decoration: none; color: white; } a:active { text-decoration: none; color: white; } a#logo-link { text-decoration: none; } a#logo-link:visited { text-decoration: none; color: inherit; } a#logo-link:active { text-decoration: none; color: inherit; } ul#main-links > a > li > span.word-position { position: relative; top: 5px; } #main-content { background-color: rgb(131, 111, 255); width: 100%; } #background { } h1#page-header { margin: 0; font-family: code; font-size: 45px; text-align: center; padding: 5px 0px; } /* ABOUT */ #pic-container { width: 100%; height: 180px; text-align: center; padding-top: 10px; } #relative { position: relative; display: inline-block; right: 97.5px; } #photo-frame { background-color: royalblue; position: absolute; width: 0px; height: 0px; border-radius: 100px; border-style: solid; border-color: beige; border-width: 0px; top: 90px; left: 90px; } #photo-frame > #picture { width: 100%; height: 100%; background-image: url('Ed.png'); border-radius: 100px; } hr { position: relative; top: 97.5px; margin: 0; border-style: solid; border-color: black; overflow: hidden; height 2px; background-color: black; } .hidari { float: left; } .migi { float: right; } .clear { clear: both; } #intro { width: 70%; font-family: lato; margin-left: auto; margin-right: auto; text-align: justify; font-size: 17px; line-height: 150%; } #expertise { width: 80%; margin-left: auto; margin-right: auto; text-align: center; } #expertise h1 { font-family: Arial; font-size: 25px; } #expertise h2 { font-family: sinkinsans; font-size: 18px; margin-top: 5px; } #skills { width: 50%; overflow: auto; } .skill { } /*-----SKILLS BAR-----*/ .bar { width: 300px; height: 35px; border: 2px solid black; border-radius: 10px; overflow: hidden; } .nil { background-image: url('footer_lodyas.png'); /* Background pattern from subtlepatterns.com */ width: 100%; height: 100%; float: right; overflow: hidden; } .ability { width: 77%; height: 100%; background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, red , lime); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, red, lime); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, red, lime); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, red , lime); /* Standard syntax */ border-bottom-right-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 7.5px; border-top-left-radius: 7.5px; /* border-radius: 7.5px; */ } /*--------------------*/ #experience { width: 50%; } /*---------------------------------------------------------------*/ /* CONTACT */ #contact-info { margin-left: auto; margin-right: auto; width: 80%; height: 80%; } #contact-info td { margin-left: auto; margin-right: auto; width: 50%; } #contact-info td > p { text-align: justify; font-family: lato; width: 80%; } .spacer { padding: 10px 0px; } #message-div { height: 150px; } input[type="text"] { width: 100%; height: 27px; padding-left: 5px; font-family: Verdana,Geneva,sans-serif; font-size: 15px; } input[type="text"]:hover, #recipient-message:hover { border-width: 1.5px; border-style: solid; border-color: rgb(152, 245, 255); } input[type="button"] { float: right; margin-top: 7.5px; background-color: rgb(72, 118, 215); border-color: rgb(72, 118, 215); border-radius: 5px; font-size: 15px; color: rgb(230, 230, 255); font-family: Tahoma; } label { font-family: lato; font-size: 18px; } #recipient-message { width: 100%; height: 100%; resize: none; font-family: Verdana,Geneva,sans-serif; font-size: 12.5px; } .form-confirmation { width: 80%; border-style: solid; border-width: 2.5px; border-radius: 5px; border-color: rgb(0, 0, 0); } .invalid-field { box-shadow: 0 0 23px red; -webkit-box-shadow: 0 0 23px red; -moz-box-shadow: 0 0 23px red; } #success { background-color: rgb(0, 210, 0); color: rgb(245, 255, 250); } #failure { background-color: rgb(255, 48, 48); color: rgb(137, 0, 0); } .form-confirmation > p { text-align: center; font-family: codee; font-size: 18px; } #footer { width: 100%; background-color: black; } #footer > p#footer-text { margin: 0; text-align: center; font-family: arial; color: rgb(169, 169, 169); padding: 20px; width: 100%; } @font-face { font-family: arcon; src: url(Arcon-Regular.otf); } @font-face { font-family: bebas; src: url(BEBAS___.ttf); } @font-face { font-family: bubblegum; src: url(BubblegumSans-Regular.otf); } @font-face { font-family: code; src: url(Days.otf); } @font-face { font-family: lato; src: url(Lato-Regular.ttf); } @font-face { font-family: codee; src: url(CODE_Bold.otf); } @font-face { font-family: sinkinsans; src: url(SinkinSans-400Regular.otf); } .clear { clear: both; } 

 <html> <head> <title>About | Potential Beginning</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> </head> <body> <div id="container"> <div id="nav-bar"> <div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a></div> <ul id="main-links"> <a href="about.html"><li><span class="word-position">About</span></li></a> <a href="work.html"><li><span class="word-position">Work</span></li></a> <a class href="contact.php"><li><span class="word-position">Contact</span></li></a> </ul> </div> <div id="main-content"> <div id="pic-container"> <div id="relative"> <div id="photo-frame"> <div id="picture"></div> </div> </div> <hr class="hidari" /> <hr class="migi" /> </div> <h1 id="page-header">About Me</h1> <p id="intro">Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content!</p> <div id="expertise"> <div id="skills" class="hidari"> <h1>Skills</h1> <div class="skill"> <h2>HTML/CSS</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="clear"></div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="clear"></div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="clear"></div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="clear"></div> <div class="skill"> <h2>JavaScript/jQuery</h2> <div class="bar migi"> <div class="nil"> <div class="ability"> </div> </div> </div> </div> <div class="clear"></div> </div> <div id="experience" class="migi"> <h1>Experience</h1> </div> <div class="clear"></div> </div> </div> <div class="clear"></div> <div id="footer"> <p id="footer-text"> &#169; 2016. All rights reserved. </p> </div> </div> <script> $(document).ready(function() { $("#main-links li").on('mouseenter', function() { $(this).animate({borderBottomColor: "rgb(0, 154, 205)"},"200"); }); $("#main-links li").on('mouseleave', function() { $(this).animate({borderBottomColor: "rgb(238, 0, 0)"},"200"); }); $("#picture").fadeOut(); $("hr").delay(800).animate( { width: "50%" }, 3200 ); $("#photo-frame").delay(4000).animate( { width: "180px", height: "180px", top: "-=90px", left: "-=90px", borderLeftWidth: "7.5px", borderTopWidth: "7.5px", borderRightWidth: "7.5px", borderBottomWidth: "7.5px" }, "slow", function() { $("hr").animate( { width: "0%" }, 2700 ); $("#picture").fadeIn(2000); }); }); </script> </body> </html> 

Adding overflow:auto should do the trick, this will prevent the content from overlapping due to floats.

CSS:

#expertise
{
  overflow:auto;
}

DEMO

PS : since you have added height:100px; to #skills in css , you get scroll bar in that section.

DEMO-2 - This demo shows without scrollbar, I have removed the height for #skills div or you can set the height to auto .

See the updated code below: i)Change the span to div for clear class ii)remove the height for #skills div iii)remove height of #main-content and #footer , this will make the content flow as and when the content fills,height is not required. [And main-content u have mentioned as 80% and footer as 20% which already equals to 100% excluding the header,always try to split the height equal if required.] iv) I have added clear div after each skill to make each skill flow below each other, else the alignment goes wrong. v) and u forgot to add ' . ' in front of .ability class in the css