javascript - Div not expanding with content inside -
basically, in #main-content div, expand, de facto content of div fits inside , not overlapping, see in codepen.
i don't know how implement clearfix solution or overflow:hidden solution. i've tried failed.
i don't know why, p tag not overlapping, 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 > > 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; } /* */ #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 subtlepatterns.com */ width: 100%; height: 100%; float: right; overflow: hidden; } ability { width: 77%; height: 100%; background: red; /* browsers not support gradients */ background: -webkit-linear-gradient(left, red , lime); /* safari 5.1 6.0 */ background: -o-linear-gradient(right, red, lime); /* opera 11.1 12.0 */ background: -moz-linear-gradient(right, red, lime); /* firefox 3.6 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"> © 2016. rights reserved. </p> </div> </div>
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 > > 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; } /* */ #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 subtlepatterns.com */ width: 100%; height: 100%; float: right; overflow: hidden; } .ability { width: 77%; height: 100%; background: red; /* browsers not support gradients */ background: -webkit-linear-gradient(left, red , lime); /* safari 5.1 6.0 */ background: -o-linear-gradient(right, red, lime); /* opera 11.1 12.0 */ background: -moz-linear-gradient(right, red, lime); /* firefox 3.6 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"> © 2016. 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 trick, prevent content overlapping due floats.
css:
#expertise { overflow:auto; } p.s: since have added height:100px; #skills in css , scroll bar in section.
demo-2 - demo shows without scrollbar, have removed height #skills div or can set height auto.
see updated code below: i)change span div clear class ii)remove height #skills div iii)remove height of #main-content , #footer , make content flow , when content fills,height not required. [and main-content u have mentioned 80% , footer 20% equals 100% excluding header,always try split height equal if required.] iv) have added clear div after each skill make each skill flow below each other, else alignment goes wrong. v) , u forgot add '.' in front of .ability class in css
Comments
Post a Comment