What is the best way to align these elements on the page?

2 Views

What would be the best way to align the boxes seen here:

http://property.begbies-traynor.com

Read More

The boxes in question are the ‘Further Details’ boxes. I would like them all to line up perfectly on the page regardless of the description length.

Would it be best to use CSS? JS? Or hardcoded php?

The site is wordpress based using a custom theme.

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. Set each one of your containers, such as:

    <div class="post-3283 sale type-sale status-publish hentry ts-box box-4 clear">

    To have an additional class, and in that, set:

    height:370px;
    position:relative;

    Then, give each <p> that holds a green button a class, and give that the rule:

    position:absolute;
    bottom:0;

    You can test this by setting ts-box to have those added rules, and a giving a single p the latter positioning rules.

    EDIT: Here is a Fiddle illustrating the concept. Ignore the float, width, and border attributes, they are just for conceptualizing: http://jsfiddle.net/aTtAW/

  2. CSS would be my best bet. You could have a fixed height for the description box with overflow hidden (so that any extra description text will be hidden) and right below the description box have another div to hold the ‘Further Details’ box. That way all the ‘Further Details’ box will be in a straight line.

  4. I would pick CSS min-height attribute for that <p> and set it to 100-200. This will let exceptionally long text to heighten the box, but usually you will have nice aligned buttons.

    Do not hide text with overflow. It’s ugly.