There is something like this html:

<div id="wrapper"> <section></section> <section></section> <section></section> ... <aside></aside> </div>

The height of the #wrapper block is not set, since it dynamically changes depending on the appearance and deletion of a section. How to stretch aside on a clean css (floated right) across the entire height of #wrapper? So that the height of the aside, respectively, also dynamically changed.

    3 answers 3

    Option with position: absolute :

     #wrapper { position: relative; } #wrapper__left { padding-right: 220px; } section { padding: 10px; background: green; } section + section { margin-top: .5em; } aside { position: absolute; top: 0; right: 0; bottom: 0; width: 200px; background: yellow; } 
     <div id="wrapper"> <div id="wrapper__left"> <section>1</section> <section>2</section> <section>3</section> </div> <aside></aside> </div> 

       .wrapper { width: 500px; padding: 10px; border: 1px solid; } .wrapper:after { clear:both; content: ''; display:block; } .wrapper__inner { width: 200px; margin-left: -300px; float: left; } aside { float: right; width: 200px; background: yellow; } section { background: green; padding: 10px; } section + section { margin-top: .5em; } 
       <div class="wrapper"> <aside> <div class="wrapper__inner"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> <section>6</section> </div> <div class="aside__inner"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </aside> </div>

        Option with display: table .

         #wrapper { display: table; width: 100%; } #wrapper__left { display: table-cell; padding-right: 20px; } section { padding: 10px; background: green; } section + section { margin-top: .5em; } aside { background: yellow; display: table-cell; width: 200px; } 
         <div id="wrapper"> <div id="wrapper__left"> <section>1</section> <section>2</section> <section>3</section> </div> <aside></aside> </div>