The issue with CSS Width:100% not functioning properly in Google Chrome

I am currently working on creating a gallery section that includes captions using the figure and figcaption elements. This gallery must be responsive and adapt to varying heights and widths along with their corresponding captions.

While everything is functioning correctly in firefox, I am facing an issue with chrome not adhering to the 100% width specified in the CSS, which is crucial for the layout.

figure {
  margin: 6px;
  color: #333;
  display: inline-block;
  -webkit-box-sizing: border-box ;
  -moz-box-sizing: border-box ;
   box-sizing: border-box ;

}
figure figcaption {
  background: #E3E3E3;
  padding: 10px 12px 12px;
  color: #333;
  text-align: center;
  font-size: 13px;
  width: 100%;
  display: table-caption;
  caption-side: bottom;
  -webkit-box-sizing: border-box ;
  -moz-box-sizing: border-box ;
  box-sizing: border-box ;
}

For reference, here is the link to my JSFiddle

I would greatly appreciate any assistance in resolving this issue.

htmlcssgoogle-chromewidthfigure

Answer №1

To achieve the desired layout, use display:inline-table for the figure element and remove the width:100% property from the figcaption element.

Check out this FIDDLE that works perfectly in both Chrome and Firefox.

figure {
    margin: 6px;
    color: #333;
    display: inline-table;  /*changed to inline-table*/
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
}

figure figcaption {
    background: #E3E3E3;
    padding: 10px 12px 12px;
    color: #333;
    text-align: center;
    font-size: 13px;
    /*  width:100%;   */
    display: table-caption;
    caption-side: bottom;
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
}

Answer №2

To accommodate both, switch from width: 100% to width: 300px.

Answer №3

Take a look at the fiddle provided below: http://jsfiddle.net/tm4tjp4c/13/ This code snippet functions correctly on both Chrome and Mozilla browsers.

I made adjustments to the CSS by adding display:table to the figure element and removing width:100% from the figure caption.

figure {
    margin: 6px;
    color: #333;
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
    display:table;
 }
figure figcaption {
    background: #E3E3E3;
    padding: 10px 12px 12px;
    color: #333;
    text-align: center;
    font-size: 13px;
    display: table-caption;
    caption-side: bottom;
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
}

Answer №4

This method should be effective, but keep in mind that you'll need to include the <div></div> tags and define a fixed width or maximum width.

figure {
margin: 6px;
    max-width: 300px;
color: #333;
display: inline-block;
-webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;

}
figure figcaption {
    background: #E3E3E3;
    padding: 10px 12px 12px;
    color: #333;
    text-align: center;
font-size: 13px;
width: 100%;
display: table-caption;
caption-side: bottom;
-webkit-box-sizing: border-box ;
-moz-box-sizing: border-box ;
box-sizing: border-box ;
}
figure div{
    display:flex;
    flex-direction: column;
}
<figure>
    <div>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
        </div>
</figure>
<figure>
    <div>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore maasdsa dsa ds ad sad as dsa dsa dsa ds das d asd sa da  gna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
        </div>
</figure>
    <figure>
        <div>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquafgfdg. Ut enim ad minimrfgdfg gf fdg f g fd gfd g  veniam, quifdgfds nostrud fdgfdgexercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
        </div>
</figure>
        <figure>
            <div>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim as das dasd a re efsfsdghfsd fhsd fsdf hds fhds fhsd fhsd fhsdk fhsd fhdskj fhsdk fhsdkfh hsdf kdshfsdh fshdsfh ksdhf sdfdd minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
        </div>
</figure>
<figure>
    <div>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmofgdgdfgdfgfdgd tempor incididunt ut labore et dolore maasdsa dsa ds ad sad as dsa dsa dsa ds das d asd sa da  gna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
</figure>
    <figure>
        <div>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquafgfdg. Ut enim ad minimrfgdfg gf fdg f g fd gfd g  veniam, quifdgfds nostrud fdgfdgexercitation ullamco laboris nisi ut aliquip ex
    </figcaption>
        </div>
</figure>

Answer №5

Place each figure element inside a figurebox element. Adjust the figurebox display to inline-block with vertical-align set to top. Set the figure display to floating-left table. (Following your feedback)

figurebox {
  display: inline-block;
  vertical-align: top;
}

figure {
  display: table;
  float: left;
}

<figurebox>
  <figure>
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d800/img/sample01/img_01.png" >
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex asl;lf kasdfkla ;lsl sf;la dsfhasfqw qw eiiwyq uoqw ruiq qeiwory qwoeroqewr uiqw ryqwerqew rqew rqwe rqewr qwer qwe qew r qwer qwe rqwer qwer 
    </figcaption>
  </figure>
</figurebox>

View the updated example http://jsfiddle.net/t28gjzpv/1/

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

Is there a way to place two input fields from different forms side by side on the same line?

Here are two forms extracted from an html page: <form method="get" action="search/s" id="number"> <div style="text-align: center;"> <input type="text" id="regNo" name="regNo" size="30" maxLength="50" > or ...

javascripthtmlcssuser-interfaceweb

Creating uniform table column widths within a flex container with dynamic sizing

I am working on designing a navigation system for my website using a table inside a flexbox. I want to ensure that the table columns have equal width and can scale dynamically. Additionally, I aim to wrap the text in the data cells without changing the cel ...

htmlcss

The initial child expands in width according to the content until it reaches the boundaries of the parent, triggering the

My goal is to achieve a layout where the parent container's width can vary. The first child element (red) should expand based on its content until it reaches the end of the parent, at which point text-overflow: ellipses should be applied. The second c ...

htmlcss

I am facing a challenge with my data, as it includes start and end values representing character indexes for styles. I need to find a way to convert this information into valid HTML tags

I have some content from another source that I must transform into proper HTML. The content contains a string such as: "Hello, how are you?" Additionally, there is a separate section detailing styling instructions. For example: 'bold:star ...

htmlnestedformattingtags

Trigger a function from a Bootstrap modal

Here is a preview of my HTML code : <form action="form2_action.php" method="post"> <table> <tr> <td>First Name </td> <td>:</td> <td><input type="text" id="f ...

javascriptjqueryhtmlcsstwitter-bootstrap

Navigating to different HTML pages by utilizing <a> elements in Angular 2

As a newcomer to Angular 2, I've decided to build my personal website using this framework. The main page of my website contains bio information, while the other page will feature blog content. Both pages will have a shared header and footer, but diff ...

htmlangulartypescriptangular2-routingangular2-template

"Hey, do you need a see-through background for your

Currently, I am implementing the JS library found at . Unfortunately, I am struggling to make the background transparent or any other color. It appears that the issue lies in the fact that the tab styles are being overridden by the JS library whenever the ...

javascriptjquerycsstwitter-bootstrap

React CSS Modules - Adding styles to individual child elements

I'm having difficulty applying CSS styles to each child of a specific tag. I am using CSS modules in conjunction with semantic-ui-react: character.module.css .Character > GridColumn { border: solid 4px red; } character.js import React, {Com ...

cssreactjssemantic-ui-reactcss-modulesreact-css-modules

Modifying Background Images Dynamically with jQuery as You Scroll

Struggling to make my background image change while scrolling has been a challenge for me. I've tried different solutions suggested for similar questions, but so far no success - it only displays the initial background image. The setup involves havin ...

jquerycssimagebackgroundscroll

Tips for smoothly transitioning from a simple transform to a rotate effect

I need help with an HTML element that needs to rotate when hovered over. Here is the code I have: The issue I'm facing is that I don't want a transition for translateX, only for the rotation. What steps should I take to achieve this? .cog { ...

css

What is the best way to add selected values from a multi-select dropdown into an array?

Attempting to populate an array from a multiple select dropdown, I've encountered an issue. Despite using splice to set the order of values being pushed into the array, they end up in a different order based on the selection in the dropdown. For insta ...

javascriptjqueryhtmlarraysdrop-down-menu

What is the best way to determine the value of margin-left in inline CSS using jQuery?

Here is the code snippet I am working with: <div class="ongoing" style="width: +728px; margin-left: +12480px"> I need to extract the value of the margin-left property for scrolling purposes. The technique I used to retrieve the width value does no ...

javascriptjqueryhtmlcss

What is the best method to pass a JavaScript file array to a Node.js server?

Is it possible to transfer data from a Javascript file linked to an HTML page to a Node.js file on a post route without displaying it on the HTML page? If so, what is the best way to accomplish this? ...

javascripthtmlnode.js

How can one utilize JSON.parse directly within an HTML file in a Typescript/Angular environment, or alternatively, how to access JSON fields

Unable to find the answer I was looking for, I have decided to pose this question. In order to prevent duplicates in a map, I had to stringify the map key. However, I now need to extract and style the key's fields in an HTML file. Is there a solution ...

javascripthtmljsonangulartypescript

Working with Python and BeautifulSoup to retrieve <td> elements in a table without specified IDs or classes on HTML/CSS documents

While utilizing Selenium, Python, and Beautiful Soup to scrape a web page, I encountered the challenge of outputting table rows as comma-separated values due to the messy structure of the HTML. Despite successfully extracting two columns using their elemen ...

pythonhtmlcssseleniumbeautifulsoup

Issues with LESS rendering on the Django production server

After deploying my Django website to the production server, I noticed that the LESS file is being loaded but not rendered. Strangely, everything works perfectly on the local server. Any insights on why this might be happening? ...

cssdjangohtmlless

Node JS server fails to load CSS even with the use of express.static

It's quite absurd, but I've been grappling with a rather nonsensical code conundrum for days now. I just can't seem to get the CSS and image to load on my Node.js server. I've tried various solutions (like express.static, etc.), but n ...

cssnode.jsexpressstatic-files

Error: Property 'html' is undefined - AJAX response must be displayed only in a specific div

I encountered an issue: Uncaught TypeError: Cannot read property 'html' of undefined I am working on implementing a voting system for each video on my webpage from a database. I have successfully integrated it using AJAX, but the problem is ...

javascriptphpjqueryhtmlajax

AmCharts Axis renderer mistakenly renders an additional grid line

I have successfully created a basic XYChart using amcharts4. To get rid of the grid lines on the x-axis, I changed the stroke opacity for the x-axis grid to 0 using the following code: xAxis.renderer.grid.template.strokeOpacity = 0; Everything was workin ...

javascriptcssamchartsamcharts4

How to Determine If a String Represents an HTML Tag Using jQuery

Checking if a string is an HTML tag can be tricky. I've tried various methods found on Google, but none have been successful so far: var v = $(string).html() ? 1 : 0; --or---------------------------------------------- var htmlExpr = new RegExp("/^( ...

javascriptjqueryhtml