[Solved] Problems stacking div blocks

[landysaccount]

Hello.

I’m working on a website and I’m having some problems trying to stack some items right on top of each other. I have a 700px div and inside I would like to have two columns 49% each; I would be displaying articles image and title. I’m floating left each article.

Images are not fixed height and would like to be 100% the size of the column is in. Now, I would like each article to stack right on the bottom… But, I’m having problems getting to do what I want. Here’s a link to the site: Your text to link here…

Please guide me to the right direction on how to get this working.

Note: I don’t what to create two separate columns.

Thanks.

[Mr Bean]

First you need to place text and image in one div. For further reading check this http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom

[landysaccount]

Thanks Mr Bean for answering but, couldn’t find anything helpful there except for display:inline-block which works better than float:left.

If you see the sample page here you’ll notice in the second section how articles div (with gray background) are aligned.

Remember, div heights vary and are unknown.

Thanks in advanced for your time and help.

[landysaccount]

I had to use Masonry in order to make it work.

Thanks.

[Author]

Posts