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

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -