Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Thomas van der Zel
Thomas van der Zel
16,796 Points
Posted by Thomas van der Zel
Thomas van der Zel
16,796 Points

Block layout trouble

Dear fellow students,

I've been working on a website and stumbled upon a problem which is easiest to explain using an example. You can find it here:

https://jsfiddle.net/epabge1e/

What I would like is the 'gaps' to be filled; no matter which <div> has a class of "two".

What is the best way to approach this? (Unfortunately flex box is not an option, for ie 8 & 9 have to be supported)

1 Answer

Mitchell Springer
Mitchell Springer
2,576 Points
Mitchell Springer
Mitchell Springer
2,576 Points

float box 2 to the right:

.content {width: 100%}
.block {float: left; text-align: center;}

.one {width: 33.333%; height: 100px;}
.two {width: 66.666%; height: 200px; float: right;}
.two:after {clear: right;}

.green {background-color: green;}
.blue {background-color: blue;}
.red {background-color: red;}
.yellow {background-color: yellow;}
Thomas van der Zel
Thomas van der Zel
16,796 Points
Thomas van der Zel
Thomas van der Zel
16,796 Points

Hi Mitchell,

Thanks for you reply! It does what I want, but unfortunately it only only solves this scenario. If I change div 3 to class 'two' and div 2 to class 'one' (hope you can follow me) I end up with a similar problem...

I hope you have further advise!

Thomas van der Zel
Thomas van der Zel
16,796 Points
Thomas van der Zel
Thomas van der Zel
16,796 Points

Hi Mitchell,

I solved my own problem. I just discovered masonry js and it does exactly what I want.

Thanks again for your help.

Thomas

Mitchell Springer
Mitchell Springer
2,576 Points
Mitchell Springer
Mitchell Springer
2,576 Points

Ahh, now I totally understand what you are going for. Yeah using javascript might be much easier in the end to get you the results you want. Glad I could at least help a little bit.