CODEWITHSUNDEEP
htmlcss
Fabien Papet
Fabien Papet

Reputation: 2319

Avoid whitespaces with float left

I would like to know how I can avoid the big whitespace using float: left, all the block does not have the same height

here's a demo

<div class="container">
    <div class="block">
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, molestias vel quia ratione a nostrum quae provident facere perspiciatis commodi!</div>
    </div>
    <div class="block">
        <div class="content">Est, eaque, enim? Illo, incidunt, molestias aut expedita aspernatur consectetur quos sit accusantium hic mollitia beatae numquam itaque excepturi eaque.</div>
    </div>
    <div class="block">
        <div class="content">Nihil, quibusdam animi voluptatum modi pariatur aliquam adipisci nostrum placeat eos atque maxime odit optio molestias nisi dignissimos. Cum, vel?</div>
    </div>
    <div class="block">
        <div class="content">Tempore, adipisci voluptatibus iure temporibus aut hic deleniti inventore accusantium excepturi vel et omnis veritatis itaque nesciunt odit ut nemo?</div>
    </div>
    <div class="block">
        <div class="content">Voluptas, dignissimos, reiciendis, rem quasi neque quia molestiae in consequatur animi at et qui sint nihil ipsum corrupti totam repudiandae?</div>
    </div>
    <div class="block">
        <div class="content">Tempora, velit, incidunt a est sed nostrum optio suscipit in sint eveniet architecto pariatur culpa asperiores minus praesentium perspiciatis dignissimos.</div>
    </div>
    <div class="block" style="height:200px"><!-- this height is for example, the height can be higher or lower -->
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, enim, quidem laudantium quo iusto deleniti sed assumenda placeat dolorem est?</div>
    </div>
    <div class="block">
        <div class="content">Earum, ut, laudantium, eaque, quaerat architecto officiis magni iusto eum nesciunt asperiores illum sit. Et officiis modi tempore mollitia sunt.</div>
    </div>
    <div class="block">
        <div class="content">Nobis, placeat, tenetur tempore facere reiciendis illo reprehenderit sunt a ratione hic deleniti quaerat fuga ex minus eum culpa laborum.</div>
    </div>
    <div class="block">
        <div class="content">Qui, nostrum, ab, totam, molestias quaerat expedita saepe odit accusamus reiciendis rerum officia provident iusto voluptate quis quos sit nisi.</div>
    </div>
    <div class="block">
        <div class="content">Eum, dolorem, qui, autem dolorum et molestiae asperiores rerum eius minus iste quaerat labore distinctio vel cum quis atque consequatur.</div>
    </div>
    <div class="block">
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure est magni necessitatibus consequatur deleniti aut veniam repellat quis similique ab.</div>
    </div>
    <div class="clear"></div>
</div>

Style.css

body {color:white;}
.clear{clear: both;}
.block {float:left;width: 50%;height:100px;}
.content {margin: 10px; padding: 10px; background-color: #000;}

Upvotes: 1

Views: 60

Answers (1)

Billy Moat
Billy Moat

Reputation: 21050

Using regular css you can't really avoid the whitespace underneath each of your elements.

The only way to do it with css would be to have all of your content arranged in columns, not all actually floated left.

Most people get around this problem by using a plugin such as http://masonry.desandro.com/ which uses jQuery/JavaScript to make it work.

Hope that helps.

Upvotes: 3

Related Questions