Box align problem

[devianleong]

Hi, I've a problem which is the screenshot above. If the product name too long will not going to next line. Please help me.
And how can I make sure each box of product have a same width and height and same position ?

This is my HTML:

     <ul class="products">

          <li class="last"> <a href="product.php?id=1" class="image">

         <img src="image/test.png" width="150px" height="114px"/></a>
          <h3 class="name"><a href="product.php?id=1">Test Product</a></h3>

          <div class="price">MYR 1300</div>
        <img class="new" src="images/new.png" width="75px" height="75px"></img>
        </li>

        </ul>

This is my CSS:

ul.products li .image {
    display:block;
    background:#fefefe;
    border:1px solid #e3e3e3;
    width:160px;
    height:120px;
    margin:0 0 10px 0;
    text-align:center;
}
ul.products li .namea {
    font-size:12px;
    padding:0 0 5px 0;
}
ul.products li .name a {
    text-decoration:none;
    color:#666666;
}
ul.products li .name a:hover {
    color:#999999;
}
ul.products li {
    float:left;
    margin:0 42px 29px 0;
    display:block;
    position: relative; /* ADDED THIS */
}



ul.products li .price {
    font-size:13px;
    color:#003399;
}
ul.products li.last {/*MOD*/
    margin-right:0;
    border-width:200px;
     display:inline-block;
}
ul.products li img.new { /* ADDED THIS */
    position: absolute;
    top: -20px;
    left: -20px;
    margin: 0;

}

[JorgeM]

It should wrap normally... you can place a div element the h3 element, or dont use the h3 and use another approach instead unless you are using the h3 for SEO purposes and not presentation?

If you dont care about the SEO, you shouldnt use h3 for the font size.

Anyway, if you wrap a div around the text and assign a width, that's one option..

<ul class="products">
  <li class="last"> <a href="product.php?id=1" class="image">
    <img src="image/test.png" width="150px" height="114px"/></a>
    <div style="width:160px">
      <h3 class="name"><a href="product.php?id=1">This is a test product.  Checking the width here...</a></h3><div>
    <div class="price">MYR 1300</div>
    <img class="new" src="images/new.png" width="75px" height="75px"></img>
  </li>
</ul>

[drjohn]

You shouldn't be mixing an h3 inside a ul !
The code is really bad, and likely to give unpredictable results in different browsers.
The divs you have inside the li should almost certainly be spans.
If you put every part inside a set of <li>s then used classes to style each part, it would properly.