Vertically aligning objects to bottom and making them responsive in css

Hi,

I have this css that I need some help with. The output should be like in this image:
Css for product
I have started to do and got most of the things to work, but there are two things I don't get to work:

The price and the buy button should always be vertically aligned to the bottom of the div wrapping them and the text.

The whole set should be responsive so that its width and height adjusts when the resolution changes (right know the resolution is set for 1280px, but the height and width of the product image, text, price and button need to shrink a litte for tablets and such devices and I'm not sure how to dynamically adjust that).

This is the css and html I'm using:
.listings {
           padding: 0px 0;
            width:100%;
            clear:both;
        }

        .listings ul.properties_list {
            list-style: none;
            overflow: hidden;
        }

        .listings ul.properties_list li {
            display: block;
            /*width: 30.90909090909091%;*/
            width: 10.15625%;
            height: auto;
            position: relative;
            float: left;
            /*margin: 0 3.636363636363636% 3.636363636363636% 0;*/
            margin: 10px 20px 0px;
            vertical-align:bottom;
            /*background-color:yellow;*/
        }

        .listings ul.properties_list li .imageBlock{
            height:213px;
            background-color:green;
            vertical-align: bottom;  
            display:table-cell; 
        }
        .listings ul.properties_list li img {
            width: 100%;
            height: auto !important;
                    
        }

        .listings ul li .property_details{
            width: 100%;
            padding:0;     
            height:120px;
            transition: all .2s linear;
            -webkit-transition: all .2s linear;
            -moz-transition: all .2s linear;
            -o-transition: all .2s linear;
            color:#000;
            background-color:red;
           
            
        }

            .listings ul li .property_details h1 {
                font-size:0.9em;
                color:#4aa7de;
                font-weight:700;
            }

             .listings ul li .property_details h2 {
                font-size:0.7em;
            }

             .listings ul li .property_details .buyDetails{
                 height:50px;
                 vertical-align:bottom;
                 display:table-cell;
             }

            .listings ul li .property_details .price {
                color:#e73b2d;
                font-size:15pt;
                vertical-align:bottom;
                text-align:center;
            }

             .listings ul li .property_details .buyarea {
                vertical-align:bottom;
                text-align:center;
            }

 a.buy{
                  background: #4aa7de;
              background-image: -webkit-linear-gradient(top, #4aa7de, #4a98de);
              background-image: -moz-linear-gradient(top, #4aa7de, #4a98de);
              background-image: -ms-linear-gradient(top, #4aa7de, #4a98de);
              background-image: -o-linear-gradient(top, #4aa7de, #4a98de);
              background-image: linear-gradient(to bottom, #4aa7de, #4a98de);
              -webkit-border-radius: 5;
              -moz-border-radius: 5;
              border-radius: 5px;
              /*font-family: Arial;*/
              color: #454445;
              font-size: 13px;
              padding: 10px 20px 10px 20px;
              text-decoration: none;
              float:left;
              margin-left:30px;
              margin-top:6px;
              cursor:pointer;
              color:#fff;
              
            }

            h1 {
                margin:0;
                font-family: 'Open Sans', Verdana, sans-serif;
                font-weight:normal;
                font-size:16pt;
            }

            h1 + p {
                margin:0;
            }

             h2 {
                margin:0;
                font-family: 'Open Sans', Verdana, sans-serif;
                font-weight:normal;
                font-size:14pt;
            }

            h2 + p {
                margin:0;
            }

Open in new window


 <section class="listings">
            <div class="wrapper">
               <ul class="properties_list">
                   <li>
                       
                           <div class="imageBlock">
                               <img src="ProductImage/bok1.png" />
                           </div>
                       
                      
                       <div class="property_details">
                           <h1>
                               Är påven svaret?
                           </h1>
                           <h2>
                               Tomas Dixon
                           </h2>
                           <div class="buyDetails">
                               <div class="price">
                                   169 kr<br />
                                   <%-- <asp:LinkButton ID="LinkButton1" runat="server" CssClass="buy" Text="Köp"></asp:LinkButton>--%>
                               </div>
                               <div class="buyarea>">

                                   <asp:LinkButton ID="LinkButton1" runat="server" CssClass="buy" Text="Köp"></asp:LinkButton>
                               </div>
                           </div>
                           
                       </div>
                   </li>
                   <li>
                       <div class="property_img">
                           <img src="ProductImage/bok2.png" />
                       </div>
                       <div class="property_details">
                           <h1>
                               Är påven svaret?
                           </h1>
                           <h2>
                               Tomas Dixon
                           </h2>
                           <div class="price">
                               169 kr<br />
                             <%-- <asp:LinkButton ID="LinkButton1" runat="server" CssClass="buy" Text="Köp"></asp:LinkButton>--%>
                           </div>
                           <div class="buyarea>">
                              
                               <asp:LinkButton ID="LinkButton2" runat="server" CssClass="buy" Text="Köp"></asp:LinkButton>
                           </div>
                       </div>
                   </li>
                   <li>
                       <div class="property_img">
                           <img src="ProductImage/bok3.png" />
                       </div>
                       <div class="property_details">
                           <h1>
                               Är påven svaret?
                           </h1>
                           <h2>
                               Tomas Dixon
                           </h2>
                           <div class="price">
                               169 kr<br />
                             <%-- <asp:LinkButton ID="LinkButton1" runat="server" CssClass="buy" Text="Köp"></asp:LinkButton>--%>
                           </div>
                           <div class="buyarea>">
                              
                               <asp:LinkButton ID="LinkButton3" runat="server" CssClass="buy" Text="Köp"></asp:LinkButton>
                           </div>
                       </div>
                   </li>
               </ul>
            </div>
        </section>

Open in new window


I've seen in some cases that javascript is used for these scenarios also, but a not sure how to use it.

Greatful for help for the smartest and easiest way to solve this problem.

Peter
Peter NordbergIT ManagerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
have a look at http://ryanfait.com/html5-sticky-footer/, I've used it in the past and it works pretty well with minimal work to set it up
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Slick812Commented:
greetings  peternordberg, ,  I looked at your HTML and CSS code above, and I saw you used very many lines of CSS and HTML to get your three column and four row arrangement . . I really did not understand the use of the <ul> <li> structure you choose for this?
If you require column and row display, and you need horizontal alignment for rows, it is difficult for me to get that unless I use a  <table>  , If I use <div> or <li> column structures, then they do not coordinate any horizontal row correspondence that I know of.

Below is code I did, that uses a <table> for row and column display, and always lines up the "price and buy button" horiz in each product column.

<style>
#prop_list{width:50%; max-width: 1240px;}
#prop_list p{margin: 0 8%;}
#prop_list img{width:100%;}
#details{font-family: 'Open Sans', Verdana, sans-serif; font-size: 0.9em;}
#details td{vertical-align: top; position: relative; overflow: hidden;}
#details u{font-size: 0.75em; text-decoration:none; color: #000;}
#details p{background: #e00; padding: 4px; color:#4aa7de; z-index: 1;}
#details div{position: absolute; height: 4.8em; bottom: 0px; left: 0px; width: 100%; z-index: -1;}
#prices{text-align: center;}
#prices p{background: #e00; padding: 4px; border-top: 1px dashed #900; font-weight: bold;}
</style>


<table cellspacing="0" cellpadding="0" id="prop_list">
<tr>
<td style="width:33.2%"><p><img src="piechart.png" alt="bok1"/></p></td>
<td style="width:33.2%"><p><img src="piechart.png" alt="bok2"/></p></td>
<td><p><img src="piechart.png" alt="bok3"/></p></td>
</tr>
<tr id="details">
<td><p>The Product descrip for the FIRST slot?<br />
<u>Tomas Dixon<br />Ronnie No-hair Slapavitz RDD PHD CIJ</u>
</p><div style=""><p style="height: 4.8em; z-index: -1;">&nbsp;</p></div>
</td>
<td><p>Ar paven svaret?<br />
<u>Tomas Dixon</u>
</p><div style=""><p style="height: 4.8em; z-index: -1;">&nbsp;</p></div></td>
<td><p>Ar paven svaret?<br />
<u>Tomas Dixon</u>
</p><div style=""><p style="height: 4.8em; z-index: -1;">&nbsp;</p></div></td>
</tr>
<tr id="prices">
<td><p>169 kr<br /><button>Buy</button></p></td>
<td><p>169 kr<br /><button>Buy</button></p></td>
<td><p>169 kr<br /><button>Buy</button></p></td>
</tr>
</table>

Open in new window


You use some "Widths" like  
      width: 10.15625%;
that make no sense to me, I gave my table a width of -
     #prop_list {width:50%; max-width:1240px;}
just for development, but I had no web page to see what the actual width settings should be?

This works as far as I can tell, I did not set a minimum width for  #prop_list , but that would depend on the width of container of the <table> .

ask questions if you have problems.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.