Looking to repair CSS for preventing DIVs from overlapping

Question

Looking to repair CSS for preventing DIVs from overlapping

My template features a main image with thumbnails below it, but each product may have a different number of thumbnails with varying aspect ratios.

To ensure that the thumbnails look appealing, I scaled them all using the following CSS:

#product-thumbnail {
    height: 100px;
}

#product-thumbnail a img {
    height: 100%;
}

All these thumbnails are contained within a 630px wide container. If there are multiple thumbnails, they spill over to a second row, overlapping my description text.

I attempted to use 'clear: both' on my description div, but unfortunately, it didn't work as expected.

Here is the link to my jsFiddle for reference: http://jsfiddle.net/7eY3M/1/

Any assistance would be greatly appreciated!

css html

Answer 1

Answer №1

    #product-thumbnail {
        display: block;
    }

    #product-thumbnail a img {
        vertical-align: middle;
        height: 100px;
        margin: 5px;
        box-shadow: 10px 10px 20px #909090;
        -webkit-box-shadow: 10px 10px 20px #909090;
        -moz-box-shadow: 10px 10px 20px #909090;
    }

Adjust the height to 100px within the images themselves, not in the surrounding div.

Check out the updated fiddle here!

Answer 2

    #product-thumbnail {
        display: block;
    }

    #product-thumbnail a img {
        vertical-align: middle;
        height: 100px;
        margin: 5px;
        box-shadow: 10px 10px 20px #909090;
        -webkit-box-shadow: 10px 10px 20px #909090;
        -moz-box-shadow: 10px 10px 20px #909090;
    }

Adjust the height to 100px within the images themselves, not in the surrounding div.

Check out the updated fiddle here!

Answer 3

Answer №2

~UPDATE~

One effective method is to utilize individual

elements with a height of 100px inside another container div, each styled with float:left. This approach will maintain the images in a row while allowing them to wrap naturally, preventing overflow issues. Remember to include display: inline-block; within your

<div id="product-thumbnail">

Failure to do so can lead to awkward positioning of the description, unlike using either display: block or display: inline.
Css
#product-thumbnail {
display: inline-block;
min-height: 100px;
float:none;
}
.thumb

{height=100px;<br>float:left;}


    <code><div id="product-thumbnail">

<div class="thumb"> <img src=img1> </div>
<div class="thumb"> <img src=img2> </div>

Answer 4

~UPDATE~

One effective method is to utilize individual

elements with a height of 100px inside another container div, each styled with float:left. This approach will maintain the images in a row while allowing them to wrap naturally, preventing overflow issues. Remember to include display: inline-block; within your

<div id="product-thumbnail">

Failure to do so can lead to awkward positioning of the description, unlike using either display: block or display: inline.
Css
#product-thumbnail {
display: inline-block;
min-height: 100px;
float:none;
}
.thumb

{height=100px;<br>float:left;}


    <code><div id="product-thumbnail">

<div class="thumb"> <img src=img1> </div>
<div class="thumb"> <img src=img2> </div>

Looking to repair CSS for preventing DIVs from overlapping

Answer №1

Answer №2

Similar questions

What are the benefits of incorporating CSS into a CSS block rather than utilizing inline output with HtmlHelper in CakePHP?

What is the best way to send the value from a textbox to this script?

Retrieving information from an API and incorporating it into JSX results in displaying text within the HTML element

Tips for adding a string variable to a JQuery HTML element attribute

Is it possible to adjust the width of the comment box on the Facebook "Like" button?

Generating columns in Plotly Dash according to user input

What could be causing my CSS/Layout to alter once AJAX/JavaScript has been executed?

The progress bar fails to update once it hits 100%

Tips for preventing Uncaught SecurityError: Blocking a frame with origin in phonegap

Uniform Column Height Functionality Exclusive to Desktop Devices

Ways to create a scrolling container with dynamic CSS transformations

CSS - Is there a way to alter the arrangement of DIVs depending on the size of the screen?

The simplest way to increase the size of a child element in order to generate a scrollable area

Combine table cells to improve readability on smaller screens

Utilizing blend modes to invert colors

Building a personalized payment experience using Python Flask and Stripe Checkout

Google Map not rendering correctly when dynamically implemented for the second time

Is it possible for the JavaScript DOM API to retrieve the exact casing of attribute and tag names?

Combining Django HTML Tags for Optimized Looping with Conditions

Tips for positioning text next to a hyperlink using HTML or CSS