I am attempting to arrange 9 images in a grid format of 3 rows by 3 columns to create a seamless

I am currently working on setting up a 3x3 grid on my website with 9 images and text underneath. The first 6 images are displaying as I intended, but when I add the last 3 images, the layout gets messed up. The first image jumps under the 3rd image on the second line, and the last 2 images end up far below.

Here is a fiddle link for reference: https://jsfiddle.net/jbbj1e6q/

Below is the HTML code snippet:

<div class="member bordadd"> <img class="img-responsive img-thumbnail fixsamesize" src="http://www.aphhorses.se/wp-content/uploads/2017/05/Bacau.jpg" alt="Responsive image" /> <div class="name"><span>Bacau du rouet</span></div>

htmlcssimage

Answer №1

I believe the issue stems from the varying lengths of the text. If all content were equal in length, this problem would likely not occur. My suggestion would be to encompass all text within a layer with consistent height and adjust the content accordingly. Alternatively, consider using a script to display content on hover or implement some other interactive element.

Answer №2

To ensure proper display, simply add white-space: nowrap to the design-cast id. Just be sure to make adjustments to the text alignment under the images:

#design-cast {
position: relative;
overflow: hidden;
white-space: nowrap; //Be sure to include this
}

For an updated demonstration, check out the revised jsfiddle here.

I trust that this information proves beneficial.

Answer №3

If I were to tackle this, I would opt for the display: flex approach:

/* CSS Styles */
.white-background {
  background-color: #FCFBE3;
}
.site-content {
  background-color: #FCFBE3;
}
h1 {
  color: black !important;
}
.dashed-border {
  border-top: none;
}

div.item {
  vertical-align: top;
  display: inline-block;
  text-align: center;
  width: 290px;
  margin-left: 13%;
}
.ext1 {
  margin-left: 25% !important;

}

img {

}
.caption {
  display: inline-block;
}
.storbild {
  display: block;
  margin: auto;
}
#search-button {
  display:none;
}
#fixrow1 {
  margin-left: 125px;
}
#design-cast {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.member {
  width: 32%;
  margin: 0 0 45px 0;

}
.name {
  bottom:0px;
  text-align: center;
  font-size: 16pt;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: bold;
  margin-top: -15px;
}
.member img {
  width: 100%;
  display: block;
}
.descript {
  font-size: 10pt;
  font-family: 'Montserrat', sans-serif;
}
.bordadd {
  border: 2px solid #e5e5e5 !important;
}
.fixsamesize {
  width: 333px;
  height: 210px;
  -webkit-filter: brightness(100%);
}
.fixsamesize:hover {
  -webkit-filter: brightness(70%);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.viewmorehorse {
  text-align: center;
}
<div id="design-cast">
  <div class="member bordadd">
    <img class="img-responsive img-thumbnail fixsamesize" src="http://www.aphhorses.se/wp-content/uploads/2017/05/Boyzon.jpg" alt="Responsive image" />
    <div class="name"><span>Boyzon st Tropez</span></div>
    <p class="descript viewmorehorse">Click to see more</p>
    <p class="descript">Gelding
      2006
      Bleckert boy x Saluut
      <b>Owner:</b> Yvonne Talamo & Björn Häggström
      <b>Level:</b> 145
      A horse that has made so much for us and will always stay in the family.
    </p>
  </div>

  <!-- Repeat similar content blocks -->

</div>

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

Where did my HTML5 Canvas Text disappear to?

I am encountering a common issue with my code and could use some guidance. Despite numerous attempts, I can't seem to figure out why it isn't functioning properly. To better illustrate the problem, here is a link to the troublesome code snippet o ...

javascripthtmlcanvas

Is there a way to achieve the same zooming and panning effects on an element using CSS transform instead of jQuery's

If you click on the following link, you will see a jsFiddle that I have created to demonstrate my question: http://jsfiddle.net/VbCcA/3/ In my project, I have developed a function that allows for panning and zooming to a specific element. This function i ...

jquerycssjquery-animatecss-transforms

Google Maps Marker disappeared upon relocation to the current application

After reading several articles on missing markers, I'm still facing a unique issue that doesn't seem to have a clear solution. The problem arises when attempting to render a basic map with just one marker and a fixed location. Despite Chrome dev ...

cssgoogle-mapscanvasgoogle-maps-api-3marker

CSS3 columns causing <li>s to be cropped

I'm attempting to implement css3 columns with a list (<li>), but I'm running into some issues getting it to function properly. I have wrapped the <ul> in a div like this: .ul-container { -moz-column-width: 310px; -moz-column-gap ...

htmlcssmultiple-columns

Is the content within the div longer than the actual div itself when the width is set to 100%?

When working with a div of fixed width that contains only an input text box, and the width of the input is set to 100%, you may notice that it extends slightly beyond the boundaries of the div. For demonstration purposes, consider the following code: HTM ...

htmlcssfirefox

Displaying an image on a jsp page

In my current JSP, within the HTML section, I have the following: <select> <%if(size == 1)%> <option>None selected</option> <%if(size > 1)%> <option>1</option> </select> Additionally, I have this ima ...

htmlcssjsp

What is the best way to choose a single li element?

I am working on creating a reservation system using HTML, CSS, and JS. I want to customize the color of the border for each list item (li). However, I want only one li to be selected at a time. When I click on a different li, it should remove the selection ...

javascripthtmlcssarrays

Design a food selection with only CSS and HTML

I am working with a menu structure that looks like this: <ul class"menu"> <li> <a>item1</a> <ul> <li><a>subitem1</a></li> <li><a>subitem2</a></li> &l ...

htmlcssmenu

A specific class has no border on its left side

Is there a way to use CSS to disable the left border to the right of a cell with a specific class? In the scenario shown in this image, the right border appears double due to the combination of the "selected" class border and the default gray border. I wo ...

cssborder

Using the HTML <span> and svg elements together does not allow them to be inline with each other

In my current scenario, I have a fieldset that is inline with another one on the page. The specific fieldset in question contains an SVG circle and some text. My objective is to have both elements inline with each other, while allowing the fieldset to adj ...

htmlcsssvginline

Is there a way to display an asterisk within a select2 dropdown to signify that a field is mandatory?

I'm facing an issue with the Select2 plugin in my form. While all fields are required and marked by an asterisk when empty, the Select2 dropdown ignores this validation attribute. Therefore, I am wondering: Is there a way to display an asterisk image ...

phpjquerycsscodeigniterjquery-select2

At a specific media query breakpoint, links are disabled while the rest continue to function without any

Today I encountered a puzzling issue on my website with a responsive layout that utilizes @media queries and breakpoints. At one specific breakpoint (or resolution, as I am still learning the terminology), the links in the navigation bar are inexplicably d ...

htmlcssresponsive-designmedia-queries

Troubleshooting the issue of browser prefix injections not functioning properly in Vue when using the

I've spent an entire afternoon on this issue and I'm completely stuck. After realizing that IE11 doesn't support grid-template, I learned that I need to use -ms-grid-columns and -ms-grid-rows instead. I am attempting to generate CSS and inje ...

javascriptcssvue.jsinternet-explorer-11

How to transfer a java list to an html template

I have extracted some information from an HTML file that relies on input from a Map structure as demonstrated below Template t = TemplateLoader.load("Printing/account.html"); Map<String, Object> map = new HashMap<String, Object>(); map.put("a ...

javahtmlplayframework

Utilizing iPad, Safari, and CSS to effortlessly fill a page with flexbox properties

Trying to create a flex layout that expands the main area to fill the entire height of the display, with a footer always at the bottom when the content is small. However, if the main content exceeds the display size, it should behave like a normal page and ...

htmlcssipadsafariflexbox

Converted my Flask code into a specialized software package, encountering a perplexing TemplotNotFound error

After reorganizing my Flask code into a Python package structure, I am facing an issue where none of the HTML templates can be found when I run the code. Let me outline the simplified structure of my current Flask package. The run.py file is responsible f ...

pythonhtmlflask

Guide to creating a nested list using the jQuery :header selector

Here is the structure of my html: <h1 id="header1">H1</h1> <p>Lorem ipsum</p> <h2 id="header2">H2</h2> <p>lorem ipsum</p> <h2 id="header3">H2</h2> <p>lorem upsum</p ...

javascriptjqueryhtmlcssnested

Struggling to receive a response from request.POST.get within the index function of views.py

I am struggling to develop a web application that shows the IP Address of a hostname entered by the user in a text field. Unfortunately, I keep encountering an error where I can't seem to get a response from the URL. As a beginner in this field, I wou ...

pythonhtmldjangodns

Discovering back-to-back days

I am currently working on a PHP script that utilizes a MySQL database to calculate various climatological parameters based on different variables. While I have successfully completed most of the calculations, there is one particular task that I am struggli ...

phphtmlmysql

Summernote - When validating text, it is shown as raw HTML

I have integrated Codeigniter with Summernote on the frontend. In a form, if certain fields are left empty, the same page reloads for validation checking. The JavaScript and CodeIgniter code I am using is as follows: $(window).load(function(){ &l ...

javascriptphpjqueryhtmlcodeigniter-2