Ilya Z. Ilya Z. - 3 months ago 6x
CSS Question

3 columns responsive layout

I am trying to do 3 columns responsive layout. It should work for

also. So I am using
float: left
for elements in row, but I faced with some troubles:

  1. The last images in row has unexpected height. I understand that it occurs because
    .news_preview { width: 100%; }
    , but I do not understand how to fix it.

  2. .news__item
    elements should have the same
    height = 100%
    . I know how to fix it using JavaScript, but is it possible to fix it using css only for my
    elements with
    float: left;

The example:


Well, there are few points which you should be aware. I have removed height:100% from .main and used clear:both after div.

About using clear:both, use them just after floated element so by this there will be no extra height or space issue.

About second issue, i have used display:table to main element and display:table-cell to child and removed float:left to get the desired output. Also we have replaced bottom-border to get result. For more detail check fiddle..

Check here