Frankenmint Frankenmint - 7 months ago 13
HTML Question

How do I force span elements to remain in place between variable length text and an image element?

I have a simple grid set inside a parent div.

each child in this div represents a product. I have a title, a price and an add to cart button. The add to cart button is formed using CSS. I’m trying to align my add to cart button so that it always remains in the same place no matter what, just below and to the right of the product image. It works fine unless my product title has several words - the title wraps down, but seems to push my add to cart buttons with it. I tried to set them using position: relative, but that has not been successful. I’ve tried to also set my whitespace to pre but that doesn’t work either.

How do I force my add to cart button to remain in place and also have the preceding title text wrap properly?

Note: I tried to resort to setting my add-to-cart button as a pseudo element after the h3 and that works to align them properly, but when I do this I can’t click them.

html



<ul class="productlist">
<h2>NEW PRODUCTS</h2>
<li class="product">
<img src="images/product-image-1.jpg"/>
<h3>THIS THING
HERE</h3>
<p class="price">$74.99</p>
<span class="addtocart"><a href="#">+</a></span>
</li>

<li class="product">
<img src="images/product-image-2.jpg"/>
<h3>SOMEBAG</h3>
<p class="price">$39.99</p>
<span class="addtocart"><a href="#">+</a></span>
</li>

<li class="product">
<img src="images/product-image-3.jpg"/>
<h3>A LONGER TITLE THAT WRAPS</h3>
<p class="price">$259.99</p>
<span class="addtocart"><a href="#">+</a></span>
</li>

<li class="product">
<img src="images/product-image-4.jpg"/>
<h3>RETRO CAMERA</h3>
<p class="price">$39.99</p>
<span class="addtocart"><a href="#">+</a></span>
</li>
</ul>


CSS



.productlist {
width:40%;

}

.product ul {
font-size:0px;
}

.product{

list-style: none;
display: inline-block;
padding: 10px;
font-size: 16px;
font-size:1rem;
vertical-align: top;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width: 47.5%;
}

.product li img {
max-width: 100%;
height: auto;
margin: 0 0 10px;
}

.product li h3 {
margin: 0 0 5px;
}


.product li p{
font-size: .9em;
line-height: 1.5em;
color: #999;

}



.product {
font-weight: 300;
font-size: 24px;
color: #00615a;
}

.product p{
word-wrap: break-word;
width:70%;
font-size: 18px;
}

.product h3 {

font-size: 18px;
word-wrap: break-word;

}

.addtocart {
position: relative;
top: -70px;
}

.addtocart a {

position: relative;
float: right;
margin-left:auto;
margin-right: -14px;
padding: 0 20px;
background-color: #00B9AB;
color: #fff;
font-weight: 800;
font-size: 61px;
text-decoration: none;

}

.price {


font-weight: 300;
font-size:12px !important;
color:#00615a;

}

Answer

Add a container div to hold the details, give it padding on the right hand side to top the test inside from crashing into the button and set it's position to relative.

Position the span absolutely to the top right of the .details div.

HTML:

<div class="product">
  <img src="#" alt="#">
  <div class="details">
    <h3>TITLE</h3>
    <p class="price">$74.99</p>
    <span class="addtocart"><a href="#">+</a></span>
  </div>
</div>

CSS:

.details {
    position: relative;
    padding-right: 30px; // width of button plus a bit more
}

.addtocart {
    position: absolute;
    top: 0;
    right: 0;
}
Comments