Prevent image element from overflowing in HTML

How can I prevent the images on the right from extending beyond the right padding?

I want the fourth image to align with the red block above it. https://i.sstatic.net/KUE62.png

Does that clarify things?

<div style="margin: 0 15px;height: 40px; background-color: red">

</div>
<div style="padding: 0 15px;height: 400px;white-space: nowrap;overflow: hidden;">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
</div>

htmlcssimage

Answer №1

Opt for using margin over padding.

<div style="margin: 0 15px;height: 40px; background-color: red">

</div>
<div style="margin: 0 15px;height: 400px;white-space: nowrap;overflow: hidden;">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with Jquery's .mouseover() method? Let's catch the solution!

I'm currently working on a jQuery homework assignment and I've been attempting to enhance the mouseover feature, but unfortunately, it's not functioning as expected. $("button").mouseover(function() { $(this).css({ left: (Math.rando ...

javascriptjqueryhtmlcss

The issue of background and footer distortion arises in PhoneGap when the keyboard is opened

Currently, I am experiencing screen problems with phonegap. The issue arises when a keyboard is opened, causing the back button at the bottom of the page to move above the keyboard and resulting in the background image appearing shorter. How can this be re ...

javascripthtmlcordova

Thumbnails on the grid are vertically aligned to the top

How can I vertically align grid items at the top without manually setting grid span properties for li elements? I need the layout to be flexible and work for any number of list elements. ul { position: absolute; left: 0; top: 0; width: 400px; ...

csscss-grid

Get your hands on the base64 image by triggering the save as popup and downloading

I am facing a challenge with downloading a base64 image onto the user's machine. So far, I have attempted the following steps: var url = base64Image.replace(/^data:image\/[^;]+/, 'data:application/octet-stream'); window.open(url); an ...

javascriptimage

"Converting HTML code into visual templates for browser display - a step-by-step guide

I have a task to transform HTML into a template format. As shown in the image, the content needs to be displayed as a template. I currently use a table for display, but now I want to present it in a template output. Below is the code snippet: <table ...

phpjqueryhtml

Make the image take up the entire screen in HTML

My goal is to display an image that fills the entire screen. Here's how my HTML code looks: <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title></title> </head> ...

androidcsshtml

Scss - Only one for mobile devices

Just dipping my toes into scss and I've got a quick question. Here's the snippet of scss code I'm working with: .page { max-width: 1200px; position: relative; width: 100%; ul{ background-color: black; width ...

csssass

Store the arrays in a JSON file before utilizing Array.push() to append data into it

I'm currently developing a calendar software and I want to store events in a JSON file. My strategy involves nesting arrays within arrays in the JSON format, allowing for easy iteration and loading during program initialization. My main question is: ...

javascripthtmlcssarraysjson

Retrieve the DOM variable before it undergoes changes upon clicking the redirect button

I have been struggling for a long time to figure out how to maintain variables between page refreshes and different pages within a single browser session opened using Selenium in Python. Unfortunately, I have tried storing variables in localStorage, sessio ...

javascriptpythonhtmlselenium

Putting Images Next to Each Other - Arranging Them to Be Responsive

I have a pair of images on my webpage that I've aligned next to each other. To enhance the mobile user experience, I want these two images to stack on top of each other when viewed on smaller screens. If anyone can provide guidance on creating respon ...

htmlcssresponsivephoto

Center sidenav material 2 in alignment

Using Angular Material 2 presents a challenge for me: While I can align the text in the sidenav to center, I am struggling to align the button correctly. https://i.sstatic.net/vjHw4.png <md-sidenav-layout fullscreen> <md-sidenav #start mode=" ...

htmlcssangularangular-materialangular-material2

What steps are involved in incorporating dynamic pagination in PHP using this particular snippet of code?

I am looking for a way to display a list of numbers from 1 to 1000 in a single line with the ability to scroll. However, I need to exclude both "Prev" and "1" from this list. How can I achieve this? Below is the code snippet that I currently have: echo ...

phphtmlcsstwitter-bootstrappagination

Angular API data causing an undefined error in the template

When attempting to display values in an HTML template from API data, I encountered an issue. Despite not defining all the values in the object, the data is displayed correctly. However, an error appears in the console: TypeError: Cannot read property &ap ...

htmljsonangular

Is $timeout considered a questionable hack in Angular.js development practices?

Here's a question for you: I recently encountered a situation where I needed to edit the DOM on a Leaflet Map in order to manipulate the appearance of the legend. To workaround an issue where the map wasn't generating fast enough to access the n ...

javascripthtmlangularjstimeout

Guide to making a dynamic image map with interactive links using HTML and CSS

Seeking advice on how to create clickable areas within an image that lead to different pages on my website. Image maps seem like a good solution, but the issue is that they require specific coordinates which may not work well for responsiveness. I was hop ...

htmlcssimagemap

Is less.js capable of compiling CSS code that is compatible with all browsers?

Is there a simple way to convert my Less code into browser-compatible CSS like the example below? #grad1 { background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, blue); /* For Opera 11.1 to ...

cssless

Animating the background of a div element using jQuery

I am facing an issue with the code snippet below that I have written. It doesn't seem to be working as expected and I'm curious if anyone knows why. The problem is that I have set a background color on the DIV, but when hovering over it, I want ...

jqueryhtmlcss

Exploring Instagram post layouts: A comparison of card-columns in Chrome versus other web browsers

Utilizing Bootstrap 4 card-columns for showcasing Instagram posts on a website has showcased some discrepancies across different browsers. Notably, Chrome seems to be losing the second column as compared to other browsers. Screenshots highlighting these di ...

htmltwitter-bootstrapgoogle-chromebootstrap-4

How can I target specific HTML comments using XPath?

I need to extract specific nodes from a large HTML page by using Xpath: <html> ........ <!-- begin content --> <div>some text</div> <div><p>Some more elements</p></div> <!-- end content --> ....... ...

htmlrubyxpathnokogiriscraper

Steer clear of including numerous variable values in Angular 2 while adjusting the class of selected items

Here's a question from someone who is new to Angular 2 and looking for an efficient way to change the active CSS class of tabs without using the router: activeTab: string; switchActiveTab(newTab: string) { this.activeTab = newTab; } <div clas ...

htmlangulartypescript