html - Div height 100% of content -
i have easy question css guru ruining weekend. have div image on left , text on right. need box height same of content text example in image below last line outside box while need box height content.
i cannot use fixed height due text can change inside box, need min-height defined.
some guru can me?
<a href="#" class="myclass"> <div class="postimageurl" style="overflow:hidden; z-index: 10; max-width: 100%;"> <div class="imgurl" style="background-image:url(http://cdn8.openculture.com/wp-content/uploads/2015/03/17231820/lorem-ipsum.jpg);"> </div> </div> <div class="centered-text-area clearfix"> <div class="centered-text"> <div class="myclass-content"> <div class="ctatext" style="float:left;"> upnext </div> <div style="clear:both;"></div> <div class="posttitle" style="float:left;"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat </div> </div> </div> </div> </a> and <style>
.myclass , .myclass .postimageurl , .myclass .imgurl , .myclass .centered-text-area { min-height: 100px; position: relative; } .myclass , .myclass:hover , .myclass:visited , .myclass:active { border:0!important; } .myclass { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #eaeaea; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .myclass:active , .myclass:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #ffffff; } .myclass .postimageurl , .myclass .imgurl { background-position: center; background-size: cover; float: left; margin: 0; padding: 0; } .myclass .postimageurl { width: 30%; } .myclass .imgurl { width: 100%; } .myclass .centered-text-area { float: right; width: 70%; } .myclass .centered-text { display: table; min-height: 100px; left: 0; position: absolute; top: 0; } .myclass .myclass-content { display: table-cell; margin: 0; padding: 0 74px 0 18px; position: relative; vertical-align: middle; width: 100%; } .myclass .ctatext { border-bottom: 0 solid #fff; color: #34495e; font-size: 13px; font-weight: bold; letter-spacing: .125em; margin: 0; padding: 0; text-decoration: underline; } .myclass .posttitle { color: #000000; font-size: 18px; font-weight: 600; margin: 0; padding: 0; } .myclass .ctabutton { background-color: #ffffff; margin-left: 10px; position: absolute; right: 0; top: 0; } .myclass:hover .imgurl { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .myclass .imgurl { -webkit-transition: -webkit-transform 0.4s ease-in-out; -moz-transition: -moz-transform 0.4s ease-in-out; -o-transition: -o-transform 0.4s ease-in-out; -ms-transition: -ms-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; } you can find problem here http://jsfiddle.net/l26s1vc5/
this see 
while expect have: 
the min-height 100px. tested height:100%, overflow-y:auto, height:auto without success :(
thanks help, alex.
you have 2 issues causing problem. have clearing issue , absolute positioning issue. inside of .myclass have 2 floated divs. alone cause issue having. you've attempted fix in 2 places. added class of clearfix in 1 place (which work if had css rule match). have empty div inline styling of clear: both;, though work need have third div in link.
still, if either of above working issue wouldn't have been fixed. because of absolute positioning on .centered-text. when absolutely position take out of flow of document. means it's parent has no idea size of what's inside of it. of sizing coming liberal use of min-height: 100px. if remove absolute positioning on .centered-text , use clearfix code works fine.
.myclass, .myclass .postimageurl, .myclass .imgurl, .myclass .centered-text-area { min-height: 100px; position: relative; } .myclass, .myclass:hover, .myclass:visited, .myclass:active { border: 0!important; } .myclass { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #eaeaea; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .myclass:active, .myclass:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #ffffff; } .myclass .postimageurl, .myclass .imgurl { background-position: center; background-size: cover; float: left; margin: 0; padding: 0; } .myclass .postimageurl { width: 30%; } .myclass .imgurl { width: 100%; } .myclass .centered-text-area { float: right; width: 70%; } .myclass .centered-text { display: table; min-height: 100px; /* removed absolute positioning*/ } .myclass .myclass-content { display: table-cell; margin: 0; padding: 0 74px 0 18px; position: relative; vertical-align: middle; width: 100%; } .myclass .ctatext { border-bottom: 0 solid #fff; color: #34495e; font-size: 13px; font-weight: bold; letter-spacing: .125em; margin: 0; padding: 0; text-decoration: underline; } .myclass .posttitle { color: #000000; font-size: 18px; font-weight: 600; margin: 0; padding: 0; } .myclass .ctabutton { background-color: #ffffff; margin-left: 10px; position: absolute; right: 0; top: 0; } .myclass:hover .imgurl { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .myclass .imgurl { -webkit-transition: -webkit-transform 0.4s ease-in-out; -moz-transition: -moz-transform 0.4s ease-in-out; -o-transition: -o-transform 0.4s ease-in-out; -ms-transition: -ms-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; } /* added clearfix class here can work properly*/ .clearfix:after { content: ""; display: block; clear: both; }<a href="#" class="myclass clearfix"><<!-- moved clearfix here can take effect necessary area -->> <div class="postimageurl" style="overflow:hidden; z-index: 10; max-width: 100%;"> <div class="imgurl" style="background-image:url(http://cdn8.openculture.com/wp-content/uploads/2015/03/17231820/lorem-ipsum.jpg);"> </div> </div> <div class="centered-text-area"> <div class="centered-text"> <div class="myclass-content"> <div class="ctatext" style="float:left;"> upnext </div> <div class="posttitle" style="float:left;"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat </div> </div> </div> </div> </a>all did remove said absolute positioning (it wasn't doing tell), moved clearfix proper place, removed div (also clearfix attempt) , added clearfix class end of css.
it looks you've tried lot of things make code work. may want go through , see what's doing what, lot of looks it's not doing @ all.
Comments
Post a Comment