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! While you're at it, check out some resources Treehouse students have shared here.

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

Posted by Omar Zeidan
Omar Zeidan
8,893 Points

Align the div TOP like a table-row

I`m trying to make the box#4 aligned top under the box#2 without shifting it down related to the longest box which is in this case box#1 , So I need it not on the same line of the box#3!!!

The example here [http://jsfiddle.net/wY7xy/] shows that it will be aligned within the same line if the box increase its height.

Can anybody help me? Also I need the solution to work fine on IE8.

2 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Omar Zeidan,

You'll actually need some JavaScript in order to do this properly. There might be a CSS wizard out there that can correct me on this, but I don't think you can do it with just CSS alone.

Fortunately, there are two really great JavaScript projects that can help you accomplish this. They are:

I used Masonry on a project several years ago, but I'm sure either solution works great (you only need one of these, not both). You should go with the one that works best for your needs. I hope that helps! :)

Omar Zeidan
Omar Zeidan
8,893 Points

Thank you so much for your help Nick, I will try to use one of them, hopefully it may helps:) :)

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I'm not sure I understand what you are trying to do. It would seem to me you should just create divs and use them as columns.

http://codepen.io/jamesbarnett/pen/aKhqE

Omar Zeidan
Omar Zeidan
8,893 Points

Thank you James, Actually yes I need the same you are talking about but your solution changed the structure of the markup! I have a dynamic content so I`m using the float left as row-cell , each row with two cells which it maybe appear as 2 columns but in fact its row with two cells!

I hope I explain that in a good way :P ^_^

James Barnett
James Barnett
39,199 Points

Why can't you change the structure of the markup? If you wrote the PHP/ruby that generates it just tweak it a little. Am I missing something here?

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

It's a little bit complicated to explain, but I've had this exact problem before. Let me at least try to describe it...

When you're in PHP/Ruby and looping through your database objects, it's really easy to fill out a column going downwards, like this:

[1] [4] [7]
[2] [5] [8]
[3] [6] [9]

It's much more convoluted to fill in columns across, like this...

[1] [2] [3]
[4] [5] [6]
[7] [8] [9]

That's why things like Isotope and Masonry exist. So you can just abandon columns and fill things in going across, float everything to the left, and then remove the space above/below elements (if they're different heights).

Omar Zeidan
Omar Zeidan
8,893 Points

James Barnett , No you didnt, it just was an issue happened but the layout was built for the whole project as this, so its done now I figured out a small piece of jQuery to solve the problem Ill share that with you and Nick, I know you dont need for that, but to correct me if there`s something missing :)

Omar Zeidan
Omar Zeidan
8,893 Points

Nick Pettit , Yes Nick I`m exactly was talking about the second example you just wrote,

The two library you sent are awesome, but I made a very small of JS to solve the problem, I`ll share that with you also just to give me any kind of comments on it :)

Thank you for your help.