Responsive div layout

hello!

i want to make a layout like the daily section on esquire http://www.esquire.co.uk/

first i wanted to use a container with several rows - but i think its not possible that two rows from different containers are overlapping? as you can see on esquire - the 1st image is higher then the second one but just below the 3nd article the 3rd one starts.

so i think divs are the right way? but i dont know how to handle the floating? the first “row” is no problem with float:left, but when i’m using float:left in the row beneath as well it doesn’t work.

sorry i’ve just got very basic css skills :confused:

Try to NEST rows. As the image shows, start with one 2 columns row widget (orange), then add two more 2 cols row widgets (green) in the 2nd col of the first one.

Then inside each col you build your element with divs.

http://vincent.polenordstudio.fr/snap//Esquire_-_The_Smart_Mans_Guide_to_The_Best_in_Style_Food_Gear_Culture_and_more_2015-01-09_17-32-43.jpg

ahhhh thank you! i think this should work :slight_smile: