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

Add data to a size guide

My coding project involved creating a sizing chart using HTML, CSS, and JavaScript. The chart allows users to select their preferred units of measurement (metric or imperial). I used JavaScript to dynamically update the values in the chart based on the sel ...

javascripthtmlcss

Personalize the style of ordered lists

Greetings! I am attempting to customize the style of an ordered list like the one shown in the image on another website. However, instead of the circle used in that picture, I want to use a different CSS Image like the one (without text) shown here I&apo ...

csshtml-lists

Transforming HTML code into a structured object

The provided code snippet includes HTML markup that needs to be transformed into a specific format. <html> <head> <title>Hello!</title> </head> <body> <div class=”div1”> <h1>This is a ...

javascriptarrayshtmlobject

Lost item phenomenon: conceal information below until it emerges

I'm attempting to create a garage door effect on my website, where upon loading the page, a garage door is displayed. Upon hovering over the door, it lifts up to reveal the content behind it. The challenge I'm facing is keeping the content hidden ...

javascriptjqueryhtmlcss

Is there a way to hide an image once my scrollable div has reached a specific height?

I'm currently working on a project that involves a scrollable div with arrows above and below. My goal is to have the arrow above only appear after the div has reached a certain height. Below is the code I've been using... $("#scrolldivup").hid ...

javascriptjqueryhtmlscroll

increasing the size of a picture without resorting to a pop-up window

Struggling to implement a product details tab within a table that features a clickable image. When the image is clicked, it should enlarge but the width doesn't adjust accordingly. I'm using bootstrap 5.3 and can't seem to identify the root ...

javascripthtmlcssbootstrap-5

I am having trouble with Node.js not properly handling POST requests and instead throwing a 505 error

I am a newcomer to nodejs and facing a roadblock in completing my project. I have been stuck for almost 2 days trying to resolve an issue with POST requests not being listened to by nodejs. Despite console logging, I keep getting a 405 error page. Here&ap ...

htmlnode.jsexpress

Is it possible to eliminate the default placeholder text from Safari browser?

My goal is to design a form that includes date and time input fields. The placeholder text should move up by X pixels when the user clicks on the field. While the form appears fine in Chrome, there seems to be an issue with overlapping form fields in Safa ...

javascripthtmlcsssafaribootstrap-5

Try placing the div class above the navbar in Bootstrap

I've created these fork me ribbons in CSS with the intention of placing them on top of the navbar, similar to the Github images. Here is how they currently appear: http://jsbin.com/womib/1 .ribbon { background-color: #F38419; overflow: h ...

htmlcsstwitter-bootstrap

CSS Flexbox - Choose all elements that appear at the start of a new line (Wrap)

Is there a CSS selector that can prevent content insertion on new lines when using the wrap feature in CSS-Flexbox? I am utilizing CSS-Flexbox for a layout with the wrap option, but I do not know the number of lines beforehand. I need a solution where the ...

cssflexbox

"Utilizing margins to create space between elements within a Bootstrap

I am currently utilizing bootstrap 4 and have a list of items that I am displaying in the following manner: <div class="container"> <div class="row"> <div class="card col-md-4 col-sm-6 col-12 item-wr" *ngFor="let item of items"> ...

htmlcsstwitter-bootstrapangularbootstrap-4

Issue with animated SVG failing to display in web browser

I created an animated .svg file that you can view here, but I encountered an error when trying to open it in the browser: https://i.sstatic.net/YMf5L.png The color appears different, even though the code remains the same. <svg id="Layer_2" data-name ...

htmlcsssvg

Switch to using addresses instead of latitude and longitude coordinates when utilizing the Google Maps API

I am looking to utilize Google Map Markers to indicate the locations where our services are offered. The code I have created using latitude and longitude is functioning properly, however, for my project I need to display city names instead of lat/long ...

javascripthtmlgoogle-mapsweb

Performing a simulated click on a dynamically inserted element using pure JavaScript

I am faced with the challenge of programmatically navigating a ReactJS-based website in a looped workflow. The process involves clicking on Element1, dynamically altering the web page to add Element2, then clicking on Element2, and so on until eventually r ...

javascripthtmlreactjs

Changing base 64 into Mp3 audio format using PHP

I currently have an "audio" tag with a script (which is essentially a plugin) that receives and saves it as base64. This functionality is working properly. My goal now is to modify the script in order to send the base64 data to the server, convert it to m ...

phpjqueryhtml

How can I protect a text or script file from being accessed or downloaded by entering its URL directly into the browser address bar?

While working on my JSP file, I have incorporated some Java-script code but to safeguard it from being visible to clients, I decided to store it in a separate codescript.js file and load it using ajax like so: $.ajax({ cache: true, dataType: "script ...

javascriptajaxhtml

Trouble accessing webpage on Apple devices

I recently created a website using Django and Bootstrap 5. Everything seems to be working perfectly as intended, except for when it is viewed on older iPhone models such as 6 or 7. The gifs and pictures that are dynamically fetched from the DjangoDB do not ...

htmliosdjangobootstrap-5

Is it possible to create a website with a single session for all users using JavaScript

Greetings everyone, I am excited to be posting for the first time on stackoverflow. After dedicating a week to learning javascript and achieving some things I am proud of, I have hit a roadblock. As a self-learner, I kindly ask for your understanding. Cur ...

javascripthtml

Using jQuery to create a checkbox that functions like a radio button

In my code, I have a bunch of checkbox elements placed in different containers as demonstrated below: $("input:checkbox").click(function() { var url = "http://example.com/results?&" var flag = false; var $box = $(this); var $facet = $box.val ...

javascriptjqueryhtml

Making changes to an AngularJS property updates the value of an HTML attribute

One of my pages, base.html, contains the following code: <html lang="en" data-ng-app="MyApp" data-ng-controller="MyController"> <body style="background-color: [[ BackgroundPrimaryColor ]]"> . . . {{ block ...

javascripthtmlcssangularjs