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

Troubleshooting problem with custom Angular directive integrating KineticJS

Hey there, I'm currently working on putting together a KineticJS application in Angular and need to resolve a minor issue. While following an example for setting up a draggable shape in AngularJS using KineticJS from this link: , I encountered this er ...

javascripthtmlangularjscanvaskineticjs

Is there a way to prevent my smartchatbox from covering my fixed top navbar?

Click here for more information I am seeking assistance. Your help is greatly appreciated. The question's heading reveals all you need to know. All you have to do is resize your browser, scroll down, and the answer will become apparent. ...

javascripthtmlchat

Steps to altering the color of a second button with a button click

My goal is to create a button click function that allows only one button to be clicked at a time. For instance, when btn1 is clicked, its background color changes from transparent to green. Then, if btn2 is clicked, btn1's background color should chan ...

javascripthtmljquerycss

Once the form has been submitted, proceed to open a new page following processing

Trying to remove an entry or offer from the database and then return to the page with all entries/offers. Attempted using Javascript, but it successfully deletes the item without redirecting to the overview page. Is this the correct approach with Javascri ...

javascriptphphtml

Using Javascript to trigger a setTimeout function after the user's mouse leaves

There is a div that pops up when the user's mouse exits the webpage, containing a survey pertaining to my website. I want to avoid prompting users to take the survey if they move their cursor out of the page within the first few minutes of browsing. ...

javascriptjqueryhtmlcss

As the browser window is resized, the HTML div is causing the image to be clipped

Having an issue with the dynamic resizing of Divs containing Images in my HTML Table. The Challenge: The Image within a resizable Div gets clipped at the bottom when the height decreases due to window resizing. To view the problem, visit this Example Pag ...

htmlcssweb

Display the div if the input field is left blank

Is there a way to display the div element with id="showDiv" only if the input field with id="textfield" is empty? <form action=""> <fieldset> <input type="text" id="textfield" value=""> </fieldset> </form> <div id="sh ...

javascripthtmlinputshow

Page resizing is disabled in Chrome after an Ajax load

I've been tirelessly working on the CSS for a website I'm building, and I've encountered a strange issue that only seems to affect Chrome. Firefox and Internet Explorer work perfectly fine. I am using jQuery to load HTML stubs and a signifi ...

javascriptjquerycssajaxgoogle-chrome

Bottom div refuses to adhere to the bottom of the page

I need help with creating a footer div that sticks to the bottom, left, and right of the page. The current footer doesn't extend all the way down and left. How can I resolve this without using "position: fixed;"? Below is the code snippet (I have rep ...

htmlcsspositionfooter

Managing Custom CSS Files in Sencha Touch 2 Production Build

Currently, I am in the process of working on a mobile website using Sencha Touch 2. To develop the production build, I utilized Sencha Cmd v3. Upon testing the production version, I noticed that although my custom CSS files are present in the folder struct ...

htmlcssextjssencha-touchsencha-touch-2

I am seeking guidance on how to update the HTML content being viewed in the browser when a user changes the selected option within a <select> element in ASP.NET

Hello, I'm just starting to learn about web development and ASP.Net. Can anyone help me figure out how to dynamically change the HTML content displayed in the browser when the user selects a different option from a <select> element? @*DropDown: ...

htmlasp.netasp.net-mvcrazor

Implementation demonstration / library for complete URL encoding

Currently, I am developing a Java application that extracts links from HTML and utilizes them to request their content. One particularly challenging area is URL encoding when the intent of the URL author is unknown. Determining whether to use %20 or + can ...

javahtmlhttpparsingbrowser

What is the best way to showcase two div elements side by side within my carousel

/* Implementing slideshow functionality */ var currentIndex = 0; displaySlides(); function displaySlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i ...

javascriptjqueryhtmlcss

The popup is unable to remain in the center of the screen because the background page keeps scrolling back to the top

Whenever I click a button to open a popup window, the page unexpectedly scrolls to the top. It's frustrating because if I'm at the bottom of the page and press the 'submit' button, the popup doesn't display in the center as intende ...

javascriptjqueryhtmlcssjquery-mobile

The tab key seems to be malfunctioning when triggered during a jquery change event

I encountered an unusual issue with my jQuery events, and I'm not entirely sure if it's a problem related to jQuery. In hopes that some jQuery experts can shed some light on this. The code snippet below was included in my HTML page to automatica ...

javascriptjqueryhtml

Delete the browsing cache in Internet Explorer from an external source

Currently, I am working on developing an ASP.NET application using Visual Studio. However, a persistent issue I am facing is that every time I launch the application, Internet Explorer caches certain CSS and JS files. This forces me to manually clear the c ...

javascriptcssvisual-studio-2010internet-explorer

I am encountering an issue with the Link tag from next/link that is throwing an error. The error message states: "React.Children.only expected to receive a single React element

Hey everyone, I've come across an issue with using next/link in my code. Every time I replace the anchor tag with the "Link" tag, I encounter an error. I've searched for a solution but haven't found one yet. Any help would be greatly appreci ...

cssreactjsnext.js

Creating a Dropdown Menu with an IEnumerable SelectList

I'm encountering an issue when trying to choose an item from my dropdown list and submit it. An exception of type 'System.InvalidOperationException' occurred in System.Web.Mvc.dll but wasn't handled in user code. Additional informat ...

c#htmlasp.netasp.net-mvc

What is the best approach to styling a sub-child element within the first child using TailwindCSS?

Currently working with React (Next.js) and TailwindCSS. <ul> <li> <h1 className="bg-red-400">first</h1> </li> <li> <h1 className="bg-green-400">second</h1> </li> &l ...

cssreactjsnext.jstailwind-css

Attempting to grasp the intricacies of HTML5/JS video playback quality

I've been diving deep into research on this topic, but I can't seem to find a straightforward answer to my specific query. My main focus is understanding the inner workings of how video players transition between different quality settings (480p, ...

javascripthtmlvideovideo-streaming