My CSS code for div .name sets the width to 75% to truncate text if it doesn't fit. However, resizing the window causes the text to remain the same size and my entire website structure falls apart.
This is the HTML code snippet:
<tr>
<td class="check_td"><input type="checkbox" name="products" value="<?php echo $row['id']; ?>"</td>
<td class="product_td">
<div class="product">
<div class="thumbnail">
<img class="img" src="<?php echo $row['img_path'].'/'.$row['img_name']; ?>">
</div>
<div class="name">
<?php echo $row['product_name']; ?> // this is problem
</div>
<div class="list">
<ul>
<li>Seller: <a href="" style="color:black;"><strong><?php echo $data['username']; ?></strong></a>
(<a href="">98% <img src="img/stars/star.png" width="18px" style="margin-bottom:-3px;"/></a>)
</li>
<li><?php echo $address['city']; ?></li>
</ul>
</div>
<div class="comm">
<img src="icons/comment.png" width="23px"/>(6)
</div>
<div class="id"><?php echo $row['id']; ?></div>
</div>
</td>
<td class="price_td">
<ul>
<li style="font-size:23px;">
<strong><?php echo $row['price']; ?> kn</strong>
</li>
<li>
<ul class="ship">
<li>
<?php echo $row['ship']; ?>
</li>
<li>
<strong><?php echo $row['ship_price']; ?> kn</strong>
</li>
</ul>
</li>
</ul>
</td>
<td class="button_td"><button class="menu_buttons1">Promote Listing »</button></td>
</tr>
I also realized that setting the width to percentages does not work properly when I include white-space: nowrap;
.name{
display:block;
float:left;
margin:6px 0 10px 0;
width:75%;
font-size:20px;
color:black;
font-weight: 900;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
Changing the width from percentage to pixels resolves the issue. Why can't I set the width of the div with the class name in percentages?
EDIT: I have added a JSFiddle link here: https://jsfiddle.net/nwqoh931/