Aligning floated elements to bottom in responsive design

[newtonentropy]

Hi-

I looked through some of the posts for information on this subject and could not find any. If there are any such links that I may have missed, I would appreciate it if you linked them here for me to read.

After looking around for a bit on the internet I get different responses for this question, all pretty much saying it can’t be done or to use inline-block or to use javascript. I would like to find a solution without using javascript, if possible.

Inline-block works but the problem with using inline-block is the spacing it leaves. Even when you use a css reset the spacing is still there from using inline-block and you can’t see where it is coming from in the inspector.

Floating elements will fix this problem, but then of course your floated elements are at the top of the div instead of the bottom which is where I want them. Positioning allows the elements to be positioned on the bottom, but then it’s not fluid. Setting media queries can set the position proportion for each query break, but again, you lose fluidness.

Does anyone have a solution for this using only CSS?

[newtonentropy]

Nevermind. Hahaha, I can’t believe I missed this. Duh. So using inline-block with vertical-align will get rid of the spacing. At least for what I wanted it to do in my case. This achieved my objective. Although the title suggests otherwise, floating elements was the only solution I thought at the time for my problem. Sometimes you gotta talk it out in a forum before it comes to you I guess.

[Author]

Posts