css3 - How to I make a parent div resize height based on children dimensions in this example? -


i'm making section lists user reviews on website i'm working on. problem i'm having when posts long of review, div won't resize fit text, text either overflows, or cuts off @ bottom of div. wish more specific question, have many nested div's here, don't know 1 should edit. http://codepen.io/donnaloia/pen/mykeob

html

<br> <br> <br>  <div class="maincontainer"> <div class="reviewrow"> <div class="commentpanel"> <div class="reviewerpic">   <img src="mugshot.img"></div>  <div class="authordiv"> <strong>reviewed dave</strong> <div class="stars"><img src="/static/img/stars.png"> </div>  <hr> <div class="reviewcomment">this less "pros , cons" review useful commentary kindle compared other ereaders , means ebook industry. (i believe has changed kindle's creation.)  many years have been avid reader of ebooks using every ereading device on market. early-adopter of techie gadgets had been anxiously awaiting amazon's kindle since first rumors. purchased both out of curiosity , hoping better "next generation" ebook solution. in case you're wondering whether i'm "that" steve gibson, -- i'm guy gets google's first 3  so, it's worth, if posting discovered interested pre-purchasers, hope following commentary might place kindle in "perspective" , of value you. (and if is, hope you'll click button @ bottom indicate that, review might found more potential buyers ... thank you!)</div> </div> </div> </div>  <div class="reviewrow"> <div class="commentpanel"> <div class="reviewerpic">   <img src="{{ i.author.get_profile.get_mugshot_url }}"></div>  <div class="authordiv"> <strong>reviewed cindy</strong> <div class="stars"><img src="/static/img/stars.png"> </div>  <hr> <div class="reviewcomment">hello.  short review.</div> </div> </div> </div> </div> 

css

.maincontainer {   position:relative; } .reviewrow {     width: auto;     margin-left: 0.9375em;     margin-right: 0.9375em;     margin-top: 0;     margin-bottom: 0; }  .commentpanel{   width:955px;   height:115px;   border-style: solid;   border-width: 1px;   border-color:#d8d8d8;   background:#f2f2f2;   padding:1.25rem;   margin-bottom: 12px;  }  .reviewerpic {     position: relative;     width: 90px;  }  .authordiv {     position: relative;     float: right;     width: 796px;     height: 30px;     bottom:87px; }  .stars {     width:90px;     top: 0px;     left:260px;     width: 70px;     position: absolute; }  .reviewcomment {     font-size: 12px;     font-weight:100; } 

much easier here http://codepen.io/donnaloia/pen/mykeob

changed of styles meet it...

.commentpanel{     width:955px;     /*height:115px;*/     overflow: auto;/*added*/     border-style: solid;     border-width: 1px;     border-color:#d8d8d8;     background:#f2f2f2;     padding:1.25rem;     margin-bottom: 12px; }  .authordiv {     position: relative;     float: right;     width: 796px;     /*  height: 30px;*/     bottom:87px;     top: 0px; /**added*/ } 

check out code pen


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -