Arranging images and their descriptions side by side in CSS and HTML

I am facing an issue with a row containing 5 images and descriptions below them. If the descriptions do not have the same width, the images do not stay on the same row anymore; they go up and down.

Here is my current setup:

https://i.sstatic.net/c9smB.png

HTML:

<div class="background">
 <div class="layer">
  <div class="div-diviso-contenitore">
   <div class="div-diviso">
    <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
     <div class="overlay">
     </div>
   </div>
<div class="description">
<p style="color:#ffffff; padding-top:10px; font-size:18px; text-align:left;"><b>Silvia Fait</b></p><br>
<p style="color:#20bed0; padding-top:10px; font-size:20px; margin-top:-27px; text-align:left;">Responsabile ufficio internalizzazione</p><br>
<p style="color:#ffffff; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9acbabdacbba689aaa6a7afa0a4a0aca4a0a5a0a8e7a0bd">[email protected]</a></p><br>
<p style="color:#20bed0; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Linkdein</p><br>
</div>
  </div>
    ... (remaining HTML code)
 </dvi>
</div>

CSS:

.background {
    background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
}

.layer {
    background-color: rgba(18, 29, 47, 0.96);
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 200px 20px 200px 20px;
}
    ... (remaining CSS code)

Desired outcome:

https://i.sstatic.net/mWszt.png

htmlcss

Answer №1

The issue is arising due to the vertical alignment. Simply adjust the value of vertical-align: top; and you will see the desired output.

Visit this Plunkr for more information

.div-diviso-contenitore {
    width: 17%;
    margin: 10px;
    display: inline-block;
    position: relative;
    vertical-align: top;
}

Answer №2

Take a look at this JSFiddle

Include the following CSS

.div-diviso-contenitore {
   vertical-align: top;
 }

Answer №3

To start, you must assign a specific height to the class div-diviso-contenitore.

Below is the revised version of the class div-diviso-contenitore:

.div-diviso-contenitore {
    display: inline-block;
    height: 400px; // specify your desired height
    margin: 10px;
    overflow: hidden;
    position: relative;
    width: 17%;
    word-wrap: break-word;
}

The key differences from your class are:

height: 400px;
word-wrap: break-word;
overflow: hidden;

View this code example on JSFiddle: https://jsfiddle.net/uniqueusername/abcd1234/

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

Display toggle malfunctioning when switching tabs

I am currently working on implementing a search function with tabbed features. Everything seems to be displaying correctly without any errors. However, the issue arises when I try to click on any tab in order to show or hide specific content from other tab ...

javascriptjqueryhtml

The slideUp and slideDown functions are not functioning properly

Whenever a user clicks on image-exp, I want description-exp to slide down while other description-exp slides up. I am currently using a Bootstrap template available at this link. To demonstrate the issue, I created a JSFiddle that can be accessed here. H ...

jquerycsstwitter-bootstrap

Adding a color picker to a Kendo Grid

I am working with a kendo grid that has inline editing feature. I am looking to add a kendo colorpicker to a specific column. Is there a way to display the selected color even when the row is not in the editing mode? Does anyone have an example of how to ...

javascripthtmlkendo-uikendo-gridkendo-colorpicker

Reposition various div elements within a static container

Struggling to align div boxes like the image below was exhausting: I attempted fixing it with the code provided in this JSBIN link. How can I resolve the issue and adjust the layout as desired? Any help would be greatly appreciated. Thank you in advance ...

csshtmllayout

What is the best way to ensure an image is shown in full screen exclusively on mobile devices?

My goal is to have two different site templates, one for desktop (which is already good) and one for mobile. For the mobile template, I want it to display only an image that fills the entire screen. The image should take up all the available space in term ...

htmltwitter-bootstrapcssfrontend

PHP: Bootstrap CSS for Carousels

I'm experiencing some difficulties with the Bootstrap CSS Carousel on my website. The left and right arrows seem to be unresponsive, and the slides are not transitioning automatically. I have been unable to identify the root cause of this issue. Belo ...

phpjavascriptcsstwitter-bootstrapcarousel

SQL injection for storing hidden dates

When I submit a value using my form, I want the date to be saved in the MySQL database. The user does not need to see it, but I need the dates for a future function where I can loop through the registered dates in the database. Do I need to create a hidde ...

htmldatemysqli

What is the best way to insert a block of text above a slideshow without causing it to move downwards?

I've successfully integrated a slideshow within a section tag using a div tag. To include text above the slideshow, I placed another div tag above the slideshow div. However, when adding more text, it causes the images in the slideshow to get pushed d ...

htmlcssslideshow

Issues have arisen with Google Maps functionality following the API integration, resulting in a blank grey

I am experiencing an issue with Google Maps where it is displaying a grey box or sometimes showing nothing/white. I have tried various solutions found online but none of them have worked for me. Does anyone have a solution? I even attempted to change the ...

javascripthtmlcssgoogle-mapstwitter-bootstrap-3

Bootstrap troubleshoot: Solving grid and card complications

I have nearly completed a crucial section in my Django project by implementing panels that contain a set of cards. Using Bootstrap 3 (BS3), I have integrated cards from BS4 into BS3. Encountering a peculiar issue, I seek advice from the community due to t ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Menu selection without javascript

Recently, I encountered an issue with a menu containing tabs. When hovering over a tab, a list of items appears at the bottom of the tab. However, I decided that I wanted this list to transition downwards instead of simply appearing (previously set as disp ...

htmlcssmenu

Issue encountered when attempting to remove an element from an array using the delete method

Whenever I attempt to remove an input that has been added, an error message saying "Value is NULL" pops up. I'm looking for a solution where only the selected inputs are deleted when I click on DELETE, instead of all inputs being removed. The myFuncti ...

javascripthtml

Guide on adding space between rows in a table using HTML and Bootstrap 5

In the current table containing my content, it appears like this: https://i.sstatic.net/Mm7qT.png. I wish to add space between each row to create distinct separation and achieve a look similar to this: https://i.sstatic.net/ARgR1.png I experimented with ...

htmlcssdatatablesbootstrap-5

TemplateUrl malfunctioning

While experimenting with basic Angular code, I encountered an issue where everything was functioning correctly when using template, but not when switching to templateUrl. I did not provide the previous code as it was working fine except for this specific c ...

javascripthtmlangularjs

Resize an image to precisely match the height of the text automatically

I am facing a challenge where I want to embed an image inline with text, while ensuring that it matches the height of the text. I have tried using <img src="img.jpg" height=16> and also <img src="img.jpg" height="100%">, but the former does not ...

javascripthtmlcssimage

None of the stylesheets are functioning properly in WordPress except for the menu

After installing a new theme and making some menu edits, my site suddenly broke. Strangely, only the menu css seems to be working fine. Instead of images, I am now seeing a string of array codes and the css is not functioning properly. It seems like the ...

csswordpresswordpress-themingstylesheet

Enhance User Experience with the Tooltip Feature and Customized

Here is the jQuery code I am using to style my tooltips: $(function() { // select all input fields within #tooltips and attach tooltips to them $("#tooltips :input").tooltip({ // place tooltip on the right edge position: "cen ...

javascriptjqueryhtmlcss

Bootstrap 4 fails to initialize

I'm feeling a bit confused. I put together an HTML, CSS, and JS file to showcase a new design concept and decided to incorporate bootstrap 4 into it. The structure of the folder is as follows: - projectFolder - index.html - css -- styles ...

cssbootstrap-4

My desire is for every circle to shift consecutively at various intervals using Javascript

I'm looking to draw circles in a sequential manner. I am trying to create an aimbooster game similar to . Instead of drawing all the circles at once, I want each circle to appear after a few seconds. The circles I've created currently do not g ...

javascripthtmlcss

"Error encountered when attempting to call the requestFocus() method on a Java applet from JavaScript

I'm encountering an issue with calling the requestFocus() method in JavaScript. Uncaught TypeError: Object #<HTMLAppletElement> has no method 'requestFocus' Below is my JavaScript code within the <head> tags: function onLoad() ...

javajavascripthtmlappletonload