Align Div Content to Baseline

HTML & CSS
1

Hi there,

I am trying to align the posts on this page to a baseline as done [URL=“http://www.patricklaing.com”]here.

I have tried setting .post { position:relative; } and .entry { position: absolute; bottom: 0; } but it completely messes up the floats and all posts stack on top of one another. Can anyone suggest anything for me to try?

Look forward to your replies, I’ve been stuck with this one for a while!

Thank you,

  • Roo
2

The page you linked to uses two table rows to align the elements so you don’t really want to go there. Perhaps the easiest solution is to use display:inline-block instead of floating and then you can vertically align them to the bottom.


.post-archive {
  margin: 0 40px 0 0;
  position: relative;
    float:none;
  display: inline-block;
  text-align: justify;
    vertical-align:bottom;
}
* html .post-archive{display:inline}/* ie6 hack for inline-block*/
*+html .post-archive{display:inline}/* ie7 hack for inline-block*/

However there is one problem with this approach in that one of your images has a heading underneath that says “Teaching” but lacks a description underneath like all the others. This will make the image for that element not align with the other images. One solution would be to always output a p tag underneath h3 but just add a non breaking psace to hold the height open.


<h3 id="post-35"><a title="Permanent Link to Teaching" rel="bookmark" href="http://www.patricklaing.com/wordpress/teaching/">Teaching</a></h3>
[B]<p>&nbsp;</p>[/B]

Of course that assumes that there will only ever be two lines of content and not three or four.

3

Thank you Paul, I’ll give that a go now and let you know how I get in.

Best wishes

  • Roo
4

Works a treat, and thanks for taking the time to notice that posts without a description would be a problem. It will only stick to that format, so the <p> </p> fudge does the job.

Thanks again, I was stuck with that one, and I forgot about making the divs flow inline, much better.

5

Glad it worked :slight_smile: