Chosen1
Reputation: 269
Div not expanding with content inside
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">
© 2016. All rights reserved.
</p>
</div>
</div>Upvotes: 0
Views: 627
Answers (1)
Pbk1303
Reputation: 3802
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">
© 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;
}
P.S: 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
Upvotes: 2
Related Questions
- Change an HTML input's placeholder color with CSS
- Get the current URL with JavaScript?
- How to make a div 100% height of the browser window
- How can I make a div not larger than its contents?
- How can I change an element's class with JavaScript?
- Make a div fill the height of the remaining screen space
- Setting "checked" for a checkbox with jQuery
- JavaScript closure inside loops – simple practical example
- How to align content of a div to the bottom
- How to vertically align an image inside a div