html - floated blocks fall under -
how stop float blocks collapsing? fall down... not want set specific height, because not convenient.
i need float solution. not flex. flex super easy =)
.block { position: relative; background: lightblue; border: 3px solid #5fb3ce; padding: 15px; width: 40%; float: left; margin: 2px; } ul { margin: 0; padding: 0; } li { list-style: none; } <ul class="parent"> <li class="block"> <p>fadsfa sd fa sdfasd fasdsd fasd fa</p> </li> <li class="block"> <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> </li> <li class="block"> <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> </li> <li class="block"> <p>ads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> </li> <li class="block"> <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> </li> <li class="block"> <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> </li> </ul>
edit
if care width instead of height, might want create different "column" containers of fixed width, float them left, , use javascript distribute "blocks" among them, result this:
.column { width: 40%; float:left; } .block { background: lightblue; border: 3px solid #5fb3ce; padding: 15px; margin: 2px; } .parent { margin: 0; padding: 0; } <div class="parent"> <section class="column"> <article class="block"> <p>fadsfa sd assasa sasdf aasdf fa sdfasd fasdsd fasd fa</p> </article > <article class="block"> <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> </article > <article class="block"> <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> </article > </section> <section class="column"> <article class="block"> <p>ads fa sdfasd fasfasd fasdfads faasdfasdfasdf asdfasdf asdf asdfasdf sdfasd fasfasd fasdsd fasd fa</p> </article > <article class="block"> <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> </article > <article class="block"> <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p> </article > </section> </div>
Comments
Post a Comment