I'm using CSS to left align an image but I'm having an issue with the overflow of pages that don't have enough text to fill the div so the image overflows outside of the cell.

I'm sure the fix isn't as difficult as I'm making it seem in my head, but I'd appreciate some assistance :)

A live view of the issue can be seen at:
http://www.agardenersforum.com/shop/view/1/Fiskars+Garden+Bucket+Caddy.html

Recommended Answers

All 3 Replies

The reason why this is occurring is because you applied a float:left to the image. The float takes the image outside of its normal flow. Therefore, its not part of the height of the parent div element. A quick fix is to apply a clear:both right before the closing </div> tag. You can also use the clearfix method.

For example...

<div class="box_data photo_listing">
<a href="picture/view/2/Fiskars+Garden+Bucket+Caddy.html" target="_blank">
<img src="uploads/shop/76498-41ESVX7QBEL._SY450_.jpg" height="200px" width="200px" alt="Fiskars Garden Bucket Caddy" style="float: left;"></a>
<p>The 9424 Garden Bucket Caddy by Fiskars makes it easy to carry all of your essentials when you're out in the garden. It fits snugly on a five-gallon bucket, freeing up the internal space for dirt, yard waste or supplies. Deep, large pockets provide ample space for tools, gloves, beverages and even a cell phone. Sturdy canvas construction is light, durable and easy to clean. The Bucket Caddy has a Lifetime warranty.</p>
<p>
- Ideal for transporting a variety of small tools, beverages, your cell phone and more<br>
- Frees up internal bucket space for yard waste or other items<br>
- Includes nine deep pockets and two "pencil" pockets<br>
- Durable, easy-to-clean canvas construction offers lasting value<br>
- Fits five-gallon buckets (bucket and tools not included)</p>
<div style="clear:both"><div>
</div>

Thanks, I tried applying it to a parent element thinking it'd work there too but applied your sugguestion and it worked without a second thought.

Thank you!

glad to hear that resolved your issue.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.