html - How to make full 100% height of floated element? -
html - How to make full 100% height of floated element? -
i have next html markup:
class="snippet-code-css lang-css prettyprint-override">.container { border: 1px solid green; } .right { border: 1px solid #000; float: right; width: 40px; } .left { border: 1px solid red; overflow: hidden; }
class="snippet-code-html lang-html prettyprint-override"><div class="container"> <div class="right">right</div> <div class="left-container"> <div class="left"> left fluid <br/> multiple rows </div> </div> </div>
as can see right block looks ugly. how create right element fluid height 100%?
add rule height:100%
right div, , remove float:right
. changed position:absolute
, didn't need container's height.
class="snippet-code-css lang-css prettyprint-override">.container { border: 1px solid green; position: relative; width: 100%; } .right { border: 1px solid #000; width: 40px; height: 100%; position: absolute; right: 0; } .left { display: block; border: 1px solid red; overflow: hidden; margin-right:40px; }
class="snippet-code-html lang-html prettyprint-override"><br><br><div class="container"> <div class="right">right</div> <div class="left-container"> <div class="left"> left fluid multiple rows long sentence long sentence long sentence long sentence long sentence long sentence. </div> </div> </div>
html css
Comments
Post a Comment