CODEWITHSUNDEEP
htmlcsslayout
ztsv
ztsv

Reputation: 880

3 columns responsive layout

I am trying to do 3 columns responsive layout. It should work for IE8 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 .news__item elements with float: left;?

The example: https://jsfiddle.net/3nxetb45/1/

Upvotes: 0

Views: 84

Answers (1)

Leo the lion
Leo the lion

Reputation: 3065

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

Upvotes: 1

Related Questions