5

I have this issue:

**http://img687.imageshack.us/img687/4668/problempu.jpg**

I want to reserve 4-5 rows of text in the title so the price and the Add to Cart button are aligned.

What can I do? Right now I have this:

.product-grid {
margin-bottom:15px;
margin-left:auto;
margin-right:auto;
width:auto;
text-align:center;
}

.product-grid .item-box {
float:left;
text-align:center;
vertical-align:text-top;
padding:5px;
}

.product-grid .item-box:hover {
background:#F9F9F9;
}

.product-grid .product-item {
text-align:center;
width:177px;
height:350px;
margin:0;
padding:0;
}

*.product-grid .product-item .product-title** {
font-weight:700;
font-size:12px;
font-family:Ubuntu, Helvetica, Arial, sans-serif;
padding:0;
}

.product-grid .product-item .product-title a {
display:block;
height:auto;
line-height:1.3em;
overflow:hidden;
font-family:Ubuntu,Helvetica, Arial, sans-serif;
padding:4px 10px 8px 0;
}

.product-grid .product-item .picture {
text-align:center;
height:177px;
}

.product-grid .product-item .picture img {
position:relative;
vertical-align:middle;
border-radius:5px;
border:1px solid #eee;
}

.product-grid .product-item .description {
display:none;
text-align:center;
border-top:solid 1px #e3e3e3;
color:#555;
height:50px;
font-size:120%;
margin:5px 5px 0;
padding:10px 5px;
}

.product-grid .product-item .add-info {
vertical-align:bottom;
text-align:right;
width:auto;
height:auto;
position:relative;
}

.product-grid .product-item .prices {
text-align:center;
vertical-align:middle;
position:static;
bottom:15px;
right:10px;
font-weight:700;
font-size:170%;
}

.product-grid .product-item .prices .product-price,.product-grid .product-item .prices .old-product-price {
margin:0;
}

.product-grid .product-item .prices .product-price .price {
color:#ef2525;
font-family:Ubuntu, Helvetica, Arial, sans-serif;
text-shadow:0 0 1px #333;
font-size:140%;
font-weight:700;
}

.product-grid .product-item .prices .old-product-price .price {
font-height:bold;
color:#333;
text-decoration:line-through;
font-size:70%;
font-family:Ubuntu, Helvetica, Arial, sans-serif;
}

*.product-grid .product-item .buttons** {
vertical-align:bottom;
position:relative;
margin-top:15px;
text-align:center;
}

.product-box-add-to-cart-button {
cursor:pointer;
background:#427a93;
color:#fff;
text-shadow:none;
font-size:130%;
font-weight:700;
font-family:Ubuntu, Helvetica, Arial, sans-serif;
border:solid 1px #335e70;
-webkit-transition-duration:.2s;
-moz-transition-duration:.2s;
transition-duration:.2s;
border-color:#999;
padding:7px;
}

.product-box-add-to-cart-button:hover {
background:#335e70;
color:#fff;
text-shadow:0 1px 2px #000;
border:solid 1px #335e70;
-webkit-transition-duration:.2s;
-moz-transition-duration:.2s;
transition-duration:.2s;
}

What changes do I need to do?

I have tried everything I could find with alignments and position but nothing worked. I think that if I can make a way to reserve 4-5 lines of text in the title I can make it work and be aligned.

Any help would be appreciated! Thank you!

j08691
  • 204,283
  • 31
  • 260
  • 272
eroruz
  • 83
  • 10
  • 2
    please take a look at [this quesation](http://stackoverflow.com/questions/2108740/how-do-i-indicate-long-text-into-a-smaller-fixed-column-with-css) , or just define the height of the text container ... hmm BTW try to post html next time so we can help better , we wont create an imaginary scenario – Hussein Nazzal Mar 02 '13 at 18:09

1 Answers1

9

Wrap each of the product titles with a paragraph <p> tag or a <div> or some other block-level element, and apply the same class-name to each, say "productTitle" so, for example:

<div class="productTitle">ASUS X501A</div>

Then style the class with:

.productTitle{height:4em;} // adjust to desired height.
Faust
  • 15,130
  • 9
  • 54
  • 111