HTML5: Caption for Images: Movement of Image to Following Row

I'm currently working on designing an image gallery and I've encountered an issue with displaying captions below the images. Here's the code I'm using:

<div>

 <figure>
<img src="sample-image.png" />
<figcaption>Caption Here</figcaption>
</figure>

 </div>

When I preview the gallery page, the layout of the images doesn't look right (see figure-1). The second image appears below the first one. I would like the images to be displayed side by side, as shown in figure-2. I'm not sure what CSS code I need to fix this issue. Can you help me out?

Thank you in advance :)

htmlcss

Answer №1

To ensure proper formatting, simply apply the following CSS: set 

display: inline-block; white-space: normal;
for the figure and white-space: nowrap; to its parent (assuming all figures are contained within a shared container).

Additional adjustments may be needed using properties such as vertical-align.

For further reference, check out this example on JSFiddle: http://jsfiddle.net/CDkNV/

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

Uncovering the specific file housing a CSS definition

I'm currently navigating a complex webpage with numerous CSS files that were not authored by me. I am struggling to identify a CSS style that seems elusive, as it is not located in the most obvious places (such as the CSS files) and I have no idea whe ...

htmlcss

How can the end event of a custom CSS animation be bound using jQuery or JavaScript?

We are currently managing multiple animations on the same object and need to execute different actions once each animation is complete. At present, we listen for the webkitAnimationEnd event and use a complex if/then statement to handle each animation sep ...

javascriptjquerycsswebkitmobile-safari

What causes jQuery to not work correctly during keydown events?

I've been working on this external jQuery code: jQuery(document).one('keydown', 'g',function (evt){ if ($("#tb").html() == "0") { $("#tb").html("Testing the chicken.") } else {$("#tb").html("Chickens fart too." ...

javascriptjqueryhtmlcss

Achieving consistent alignment within table rows of divs with varying heights using a fluid layout - CSS

Currently, I am developing a mobile site with a fluid layout. The main page features a table that displays several products. Within each product, there are 3 divs: product-image, product-name, and prices-container. I'm faced with the challenge of ...

htmlcssalignmentfluid-layout

How to eliminate cell borders in a Vaadin table

I recently set up a table in Eclipse using Vaadin for assistance. After some trial and error, I successfully removed the borders of the table with the following line of code: tblResetButton.addStyleName(Reindeer.TABLE_BORDERLESS) ; However, there is sti ...

htmlcsseclipsevaadin

Is your display:inline-block feature not functioning properly?

I am currently designing the homepage for this website and I am attempting to arrange the category divs under the header in a grid layout, with 3 divs per row. I have been trying to achieve this using display:inline-block, but so far, I can only get the d ...

htmlwordpresscss-floatcss

Is it possible to delete the screen reader hint while keeping the placeholder text intact?

As I work on a survey using the Google Chrome screen reader, I've observed that placeholder values are displayed as "hint, enter-your-name". The screen reader then vocalizes, "Enter your name with hint enter your name". Given that the screen reader ...

htmlformsinputscreen-readers

Avoid receiving input for a button that is being covered by another button

I am currently developing an Idle Game and I am looking to include 'buy buttons' for purchasing buildings, along with a sell button embedded within the buy button. Just as a heads up, these buttons are represented by DIVs acting as buttons. Here ...

javascripthtmlbuttonparent

How can I ensure that the Hamburger menu fully covers the entire viewport when it is open?

My hamburger menu is fully functional using CSS alone. However, when the menu opens, it doesn't fill the entire screen as I would like. Currently, my page content appears below the open menu, creating a cluttered look. https://i.sstatic.net/EtTsr.png ...

htmlcssnavigationdisplay

When applying the OWASP ESAPI encodeForHTMLAttribute method, I noticed that symbols are being rendered as their corresponding HTML entity numbers instead of the actual symbols

I recently started exploring OWASP ESAPI for preventing XSS and integrating the JavaScript version into my application. As per Rule #2 in the XSS prevention cheat sheet, it is recommended to "Attribute Escape" before inserting untrusted data into attribut ...

javascripthtmlencodingowaspesapi

`Flex alignment of columns in Bootstrap 4`

I'm feeling really lost here. I had everything figured out, but after refreshing the jsfiddle, the solution suddenly changed on me. I have a row with two columns in it, but for some reason, I can't get them to align properly on the same row. I at ...

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Tips for limiting a user's ability to download content

I must admit, this question seems a bit silly. However, at the request of our clever client, I am unable to provide an answer. Can anyone assist with this? We are in the process of developing an online tutoring platform where users can access PDF, .ppt, ...

phphtml

Executing PHP insert function from JavaScript

I am currently working on a HTML table that displays employee names and IDs fetched from an SQL select query. In this table, I want to implement functionality that allows me to edit and update the employee passwords in my database. Although the PHP functio ...

javascriptphpjqueryhtmlajax

Experiencing problems with jQuery drop-down menus - added arrows to menu links, but menu disappears when arrows are hovered over

My website has a drop-down menu implemented using jQuery, and it works well. However, I'm facing an issue where I want to add an arrow to the links that have sub-menus. The problem is that when you hover over this arrow, technically you're not ho ...

jqueryhtmlcsswordpress

The issue persists with Angular's overflow hidden not functioning properly, and similarly, the show password button is

I created a login page using Angular Material, but I'm facing some issues. The problem is that when I set the style overflow: hidden, the show password button stops working. Additionally, if I click the button twice, the webpage refreshes, which shoul ...

htmlcssangularflexbox

The width of the inline element is determined prior to the JSON content being loaded

One issue I am facing involves styling an inline element, specifically an <a> element. The code in question is: <a class="text></a> .text{ display:inline-block; background:red; padding:5px } The problem arises when trying to load text ...

htmlcssajax

Ways to reveal concealed div elements when hovering the mouse?

Is there a way to display a group of hidden div's when hovering over them? For instance: <div id="div1">Div 1 Content</div> <div id="div2">Div 2 Content</div> <div id="div3">Div 3 Content</div> All div's sho ...

javascriptjqueryhtmlcssmouseover

Responsive CSS Fluid Grid Design Encounters a Tablet Break Point Failure

During the development of a responsive website in Dreamweaver CS6 using the Fluid Grid system, all breakpoints were initially functioning correctly. The site had distinct layouts for desktop, tablet, and mobile devices, each with different resolutions that ...

csshtmlresponsive-designdreamweaverfluid-layout

Incorporate text directly into Bootstrap select input on a single line

I am attempting to include an asterisk in a select input field. I can achieve this easily by applying my own CSS, but the challenge is to accomplish this using Bootstrap 3.3.7 or an older version while displaying the asterisk on the same line as shown in t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Delay the fading in of an element using jQuery

Is there a way to remove the pause between the images in my JavaScript/jQuery slideshow when fading in and out? I attempted using a small delay, but it still didn't eliminate the blank space. Any suggestions? Check out the code on jsfiddle: https://j ...

javascriptjqueryhtmlcss