Thumbnails gracefully hovering alongside titles

I am puzzled by the fact that some of the thumbnails are displaying differently even though they have the same CSS... 

h4 { line-height:100%; color: #be2d30; letter-spacing: 1px; text-transform: uppercase; font-family: 'Gnuolane'; font-size:26px; line-height:10%; } div.container {  } div.left {    width: 45%;     float: left; } div.right {  width: 54%;     float: right; }#thumb { display:inline; vertical-align:bottom; float:right; height:30px; width:30px; }

html: 

<div class="container">
<div class="right">
<img id="thumb"src="http://www.lubika.co.il/wp-content/uploads/icons-6-150x150.jpg" >
<h4>Body Painting Art Workshop with Rotem Lutz - International Makeup Artist</h4>
March 6 @ 10:00-13:00

<img id="thumb" alt="" src="http://www.lubika.co.il/wp-content/uploads/icons-10.jpg" />
<h4>Face Painting Agency Meeting for Purim</h4>
March 9 @ 10:00-13:00

</div>
<div class="left"><img id="thumb" alt="" src="http://www.lubika.co.il/wp-content/uploads/icons-9.jpg" />
<h4>Natural Bride Makeup Agency Training</h4>
March 23 @ 10:00-13:00

<br><br>

<img id="thumb" alt="" src="http://www.lubika.co.il/wp-content/uploads/icons-8.jpg" />
<h4>Free Makeup Practice Session</h4>
March 30 @ 16:00-20:00

</div>
</div>
csshtmlimageviewtitle

Answer №1

#thumb: should be a div 'class', not div 'id'.
This means you are using your #thumb multiple times. A div 'id' can only be used once within a page.
A div class="thumb" selector can be used multiple times on a single page.

.thumb {
   display:inline;
   /* etc */
}

Also, in your code I noticed that you have line-height specified twice.

h4 {
   line-height: 100%;
   line-height: 10%;
}

It would be helpful for others to evaluate if you had put your code in jsfiddle.net.

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

Learn the method for printing CSS outlines and background colors in IE8 using JQuery's printElement feature

Printing my HTML calendar table in Chrome results in a perfect display. However, when I try to print it in IE8, the background colors and images are not included. Despite following steps from a helpful post on setting it as the default option, there were n ...

jquerycssprintinginternet-explorer-8

Submitting form data via Ajax to be processed by Express.js with body parser

Having trouble sending form data to Node.js via AJAX. Using Express with body parser on Node.js However, receiving undefined in req.body. After searching extensively online and trying various solutions without success, I am seeking assistance on the c ...

htmlnode.jsajaxexpressbody-parser

What is the best method to transfer text entered in one textarea to the output of another?

I recently picked up JavaScript again and encountered an issue while developing an app. I am struggling to pass input from one textarea to another, where the text should be converted to uppercase. I attempted to tweak code from w3, but I prefer to achieve ...

javascripthtml

What is the best way to incorporate keyboard shortcuts into carousel operations using jQuery?

The example can be found here. I want to be able to navigate through the images using the left and right arrows on my keyboard. How can I achieve this using jQuery or CSS? This is the structure of the HTML: <div id="slider-code"> <a cla ...

javascriptjquerycsskeyboard

What is the best way to retrieve data from a POST request?

I am attempting to post data from the same site and create a new order when the submit button is clicked. However, I am not receiving any information in my req.body, leading me to suspect that there may be an issue with my ejs file. Any feedback on this ma ...

htmlnode.jsexpressejs

Display only the div on an iPad screen

Is there a way to show this DIV only on an iPad screen? I've looked around on Google for solutions, but none of them seem to work. It always ends up displaying on my computer as well. Is it possible to make it show only on an iPad screen? @media only ...

cssipad

Position text input boxes on the right side of the div element

I am seeking help with aligning the text inputs to the edge of .formColumn2 so they appear in a neat line together. I have attempted using margin-right:0 and margin-left, but these solutions end up extending the .formColumn2 div which is not my desired out ...

htmlcssformstextinput

html - Removing excess space following the footer

Having trouble getting rid of the excess white space below my footer on this website: I attempted to search for a solution online and even added padding:0; to the footer's CSS, but unfortunately it didn't solve the issue. Appreciate any assista ...

htmlcss

Is it possible to make the li elements within my ul list display on multiple lines to be more responsive?

My credit card icons are contained within a ul. I have used the properties background-image and display:inline for the LIs, which display nicely on larger screens. Unfortunately, when viewed on mobile devices, the icons are cut off. My question is whether ...

htmlcsshtml-listsresponsive

Images in SCSS distorted due to styling issues

I am encountering an issue with a round image displaying properly on a browser, but appearing distorted after building the apk and running it on my android phone. The image's width is greater than its height. How can I ensure that it remains round? M ...

htmlcssionic-frameworksassscss-lint

Populate an HTML table using a JavaScript array containing objects

Greetings, fellow coders! I am new to the coding world and this community, and despite my efforts in searching for a solution, I couldn't find exactly what I was looking for. So, here is my question: I have an array structured as follows: const arr ...

javascripthtmlarraysjavascript-objects

Issue with background/hero video not adjusting its size

I've been experimenting with creating a page that features a video as the background, but no matter what I try, the video never seems to resize properly. The image below shows how it looks: image in question body { margin: 0; } .hero-se ...

htmlcss

Managing selected ticket IDs in a table with AngularJS

I have a table that includes options for navigating to the next and previous pages using corresponding buttons. When I trigger actions for moving to the previous or next page (via controller methods), I store the IDs of checked tickets in an array $scope. ...

javascripthtmlangularjs

Coat the div with a uniform shade of pure white

I need assistance on applying a solid white background color to hide the text behind it. For better understanding, I have attached a screenshot as a reference. https://i.stack.imgur.com/f8Qd9.png The issue arises when I click on the dropdown in the heade ...

javascripthtmlcssreactjs

A method to eliminate the mouse-over effect following the selection of an input box

Currently, I am utilizing Angular and encountering three specific requirements. Initially, there is an input box where I aim to display a placeholder upon pageload as 'TEXT1'. This placeholder should then toggle on mouse hover to display 'TE ...

javascripthtmlangularangularjstypescript

Creating a customized display on a webpage using XML and XSL to generate unique

Looking to utilize my xml file for generating various xsl pages. <movies> <movie> <name>Shark tank</name> <movie> <movie> <name>Tank Shark</name> <movie> ...

htmlxmlxslthyperlink

Generate a custom website using React to display multiple copies of a single item dynamically

As a newcomer to React and web development, I've been pondering the possibility of creating dynamic webpages. Let's say I have a .json file containing information about various soccer leagues, structured like this: "api": { "results": 1376, ...

javascripthtmlreactjsurldynamic

I'm encountering an issue where Bulma is taking precedence over the CSS of my Vue3

In my Vue CLI 3 project, I'm utilizing Bulma and have included the import in the 'index.js' file like so: import { createApp } from 'vue' import App from './App.vue' import router from './router' require('@ ...

cssvue.jsvuejs3bulmavue-cli-3

What is the process for connecting an HTML page to a CSS file located in a parent directory?

Here's the problem I'm facing: I recently encountered some organizational issues with my website, so I decided to reorganize my files for better classification. The current folder structure looks like this: www resources images ... css de ...

htmlcssdirectory

"Discover the steps to seamlessly integrating Snappuzzle with jQuery on your

I am a beginner when it comes to javascript and jquery, and I recently came across the snappuzzle plugin which caught my interest. After visiting snappuzzle plugin, I decided to download and link jQuery, jQuery UI, and the snappuzle.js in my HTML file. I a ...

javascriptjqueryhtml