Div not expanding with content
Adding a clearfix should solve your problem:
.clear{width: 100%; clear: both; height: 0px; line-height:0px;}
<div class='clear'></div>
Div not expanding with content inside
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>make div's height expand with its content
You need to force a clear:both before the #main_content div is closed. I would probably move the <br class="clear" />; into the #main_content div and set the CSS to be:
.clear { clear: both; }
Update: This question still gets a fair amount of traffic, so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox:
body { margin: 0;}
.flex-container { display: flex; flex-direction: column; min-height: 100vh;}
header { background-color: #3F51B5; color: #fff;}
section.content { flex: 1;}
footer { background-color: #FFC107; color: #333;}<div class="flex-container"> <header> <h1> Header </h1> </header>
<section class="content"> Content </section>
<footer> <h4> Footer </h4> </footer></div>DIV not expanding to content if some long text put into it
Solved the problem!
I've read somewhere that elements with position: absolute are taken out of the page flow, and thus are considered zero-height for min-height purposes. I also tried setting min-height: 200px for #cntr, and a small white block appeared. I still don't know why the min-height: 100%made the white div disappear completely, but now it works well.
So, changing the
div {position: absolute}
to
div (position: relative}
adjusting the coordinates accordingly and setting min-height: 100% instead of height: 100% for #cntr solved the problem for me.
Thanks for all help and ideas and hope this answer will be helpful.
CSS Div height not expanding to fit content or wrapping content
Not very elegant to break words like this, but if that's what's needed. btw apart from className, there's an extra in your HTML.
EDIT: Ignore the comment about className - react project comment added after this answer was posted.
.each-message-box { width: 100%; display: block; overflow: auto; height: auto; margin: 1px;}
.each-message { width: 270px; height: 100px; margin: 2px; border: 1px solid #ccc; overflow: hidden; height: auto; word-break: break-all;}
.each-message-date { border: 1px solid #ccc; font-size: 10px; color: #ccc; text-align: left;}
.each-message-content { width: 100%; border: 1px solid #ccc; text-align: left; border-radius: 10px; height: auto;}<div class="message-box"> <div class="each-message-box"> <div class="each-message"> <div class="each-message-date">Date</div> <div class="each-message-content">ContentContentContentContentContentContentContentContentContentContent </div> </div> </div></div>Div not expanding to width of contents
Setting a min width of 970px on footer sorted the problem
Related Topics
Creating Triangles Using Borders
How to Add Border Outside The Margin Using CSS
Will Whitespace or Wrap Be Ignored Between Two Block Elements in HTML
Beginner's Stuff: How to Stop CSS' Divs from Overlapping
Distributing Images Evenly & Horizontally in a Div via CSS
@Font-Face Ie9 Font-Weight Doesn't Work
How to Print a Web Page with All Its CSS Style Attached to The Page
Remove Element for Certain Screen Sizes
Why Does My Flexbox Sticky Footer Not Work in Safari
Rails Application Doesn't Load CSS/Js/Images in Production-Environment
Bootstrap Jumbotron Under Nav Bar
Video Player Shows Black Border