Picture spills over onto the following row

Question

Picture spills over onto the following row

Here is the HTML code snippet I have:

<div id="thumbs">
   ...8 image tags with width and height of images set to 100 x 100px
</div>

Below is the corresponding CSS:

#thumbs
    {
        overflow:hidden;    
        float:left; 
        position:relative;
        background-color:white;
        height:100px;
        width:100%;
    }

#thumbs img 
    {       
        padding:5px;    
    }

At the lowest resolution setting - 800 x 600, the last image (img8) moves to the next line. How can I ensure that all images remain on a single line even at lower resolutions?

css image overflow

Answer 1

Answer №1

If you have 8 images each measuring 100px in width, and the window is 800px wide with a 5px padding on each image, the total width would be 880px. To make the structure fit better, reduce the size of each image to 90px. Keep in mind the scrollbar which may add an extra 20-30px if there will be scrolling.

Answer 2

If you have 8 images each measuring 100px in width, and the window is 800px wide with a 5px padding on each image, the total width would be 880px. To make the structure fit better, reduce the size of each image to 90px. Keep in mind the scrollbar which may add an extra 20-30px if there will be scrolling.

Answer 3

Answer №2

Did you consider adding a min-width to the container?

#thumbs {min-width: 880px;}

The width is calculated based on 8 images that are each 100px wide with 10px padding (5px left + 5px right).

Answer 4

Did you consider adding a min-width to the container?

#thumbs {min-width: 880px;}

The width is calculated based on 8 images that are each 100px wide with 10px padding (5px left + 5px right).

Answer 5

Answer №3

Check out some tips for responsive web design that might be helpful.

The issue here is trying to fit 880px into a space meant for 800px, with additional padding. The solution could involve using a media query like this:

@media screen and (max-width: 810px) {
     #thumbs img {
     padding: 3;
     height:80px;
     width:80px
  }
}

This means that if the window width is under 810px, apply this styling to the elements. Why 810px? It's a safety measure.

To maintain design consistency, adjustments will need to be made to image sizes and padding. Experimentation may be necessary to get the desired look on screen.

Answer 6

Check out some tips for responsive web design that might be helpful.

The issue here is trying to fit 880px into a space meant for 800px, with additional padding. The solution could involve using a media query like this:

@media screen and (max-width: 810px) {
     #thumbs img {
     padding: 3;
     height:80px;
     width:80px
  }
}

This means that if the window width is under 810px, apply this styling to the elements. Why 810px? It's a safety measure.

To maintain design consistency, adjustments will need to be made to image sizes and padding. Experimentation may be necessary to get the desired look on screen.

Picture spills over onto the following row

Answer №1

Answer №2

Answer №3

Similar questions

The input field will be in a read-only state if it contains a value from the database. However, it will be editable if the value

Persistent Gap at the Top of the Page

Changing the height of a pseudo element according to the width of the viewport in a dynamic way

adjusting the size of a CSS image sprite

HTML code to make navbar change color when clicked

Tips for avoiding width miscalculations due to the appearance or disappearance of a vertical scrollbar

Resolving CSS glitches that mysteriously vanish in Internet Explorer versions 8 and 9

Steps to extract a hash from a document's URL

Tips for ensuring the position of buttons remains consistent no matter the size of the image

What is the best way to vertically align an InputLabel within a MUI Grid item?

Images from the section will not be shown when retrieving data from the sanity io database

Add distinctive formatting for the final element that is not the last child

The combination of Google Maps and CSS transforms causes a blur effect on the page

What is the method for determining the length of a string in JavaScript?

In order to showcase an image ahead of another (stay tuned),

Exploring the depths of images in WPF: An in-depth look at

The page appears to be too wide for its intended dimensions

I am looking to transform col-sm-4 into two evenly sized columns with one row at the bottom using Twitter Bootstrap

By default, the sidebar is open on desktop devices while closed on mobile devices

Change Class Depending on Vertical Scroll Position