The text consistently remains positioned to the right of my image

Photo Gallery Title Issue

I'm working on a photo gallery project where I want to add titles underneath each image. However, I'm facing a problem where the title is appearing next to the image instead of below it. You can see the issue in this screenshot.

Snippet from CSS Code

@media only screen and (max-width: 600px) {
  .boxGallery {
    margin-left: 50%;
    margin-right: 50;
  }
}

.GalleryBox {
  display: block;
  padding-left: 100px;
  padding-right: 100px;
  width: 100%;
}

.boxGallery {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

div.gallery {
  margin: 5px;
  float: left;
  width: 250px;
}

div.gallery img {
  width: 250px;
  height: 190px;
}

div.desc {
  padding: 15px;
  text-align: center;
}
<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

If anyone knows how to resolve this issue, please provide some assistance.

htmlcssphoto-gallery

Answer №1

When you float the elements inside .boxGallery, the parent item loses its dimensions because it no longer takes into account floated content. As a result, the title gets positioned as a 'filler' for the floats.

To resolve this issue, you can simply use a clearfix like this:

.clearfixme::after {
    content: '';
    clear: both;
    display: table;
}


@media only screen and (max-width: 600px) {
  .boxGallery {
    margin-left: auto;
    margin-right: auto;
  }
}

.GalleryBox {
  display: block;
  padding-left: 100px;
  padding-right: 100px;
  width: 100%;
}

.boxGallery {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.boxGallery::after {
content: '';
clear: both;
display: table;
}

div.gallery {
  margin: 5px;
  float: left;
  width: 250px;
}

div.gallery img {
  width: 250px;
  height: 190px;
}

div.desc {
  padding: 15px;
  text-align: center;
}
<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

Another approach would be to use flex. Here's how you could implement it:

.boxGallery {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.gallery {
  min-width: 120px;
  width: 25%;
  margin: 12px;
}

.gallery img {
  width: 100%;
  height: auto;
}

.desc {
  padding: 15px;
  text-align: center;
}
<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

Answer №2

When you float the .gallery, it is taken out of the normal flow of the HTML, causing the parent element to not accurately determine the height of its child elements. In this case, your .boxGallery requires a "clear-fix" solution to establish its height for floated elements:

.boxGallery:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

For more information on clear-fix techniques, check out this resource.

@media only screen and (max-width: 600px) {
  .boxGallery {
    margin-left: 50%;
    margin-right: 50;
  }
}

.boxGallery {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.boxGallery:after {
  display: block;
  content: "";
  clear: both;
  position: relative;
}

div.gallery {
  margin: 5px;
  float: left;
  width: 250px;
}

div.gallery img {
  width: 250px;
  height: 190px;
}

div.desc {
  padding: 15px;
  text-align: center;
}
<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

Answer №3

When images are floated, they are no longer in the normal flow of the document, causing the .boxGallery element to ignore their presence and only recognize the .desc element. To resolve this issue, a clear fix needs to be implemented, as shown below:

.boxGallery::after {
  content: "";
  display: table;
  clear: both;
}

For centering the images, a media query can be added to target viewport sizes where the images cannot sit next to each other effectively. In this case, removing the float property and centering the images with margins is recommended for viewports below 666px.

@media screen and (max-width: 666px) {
  div.gallery {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

To see a demonstration, refer to the code snippet below:

@media only screen and (max-width: 600px) {
  .boxGallery {
    margin-left: 50%;
    margin-right: 50%;
  }
}

.GalleryBox {
  display: block;
  padding-left: 100px;
  padding-right: 100px;
  width: 100%;
}

.boxGallery {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.boxGallery::after {
  content: "";
  display: table;
  clear: both;
}

div.gallery {
  margin: 5px;
  float: left;
  width: 250px;
}

div.gallery img {
  width: 250px;
  height: 190px;
}

div.desc {
  padding: 15px;
  text-align: center;
}

@media screen and (max-width: 666px) {
  div.gallery {
    float: none;
    margin-left: auto;
    margin-right:
    	auto;
  }
}
<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</div>

<div class="desc">
  <p>Auvergne, Frankrijk 2018</p>
</div>

<div class="boxGallery">
  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>

  <div class="gallery">
    <img src="https://placeimg.com/640/480/any">
  </div>
</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

Steps for generating instances of an HTML page and dynamically adding them to a list on the main page

I have a main HTML page and I need to insert a dynamically generated list from a template in another HTML file that I created. The template for each item in the list is located on a separate HTML page. My goal is to create multiple instances of this HTML ...

javascriptjqueryhtmlcssweb

Using Javascript to place a form inside a table

When attempting to add a Form inside a Table, only the input tags are being inserted without the form tag itself. $(function () { var table = document.getElementById("transport"); var row = table.insertRow(0); var cell1 = row.insertCell(0); ...

javascripthtml

Determine whether a click event originated from within a child window

Currently, I am utilizing window.open to initiate a new window in javascript and my goal is to identify clicks made within the child window. Essentially, if a click event occurs in the child window, I aim to modify the parent window accordingly. I have a ...

javascriptjqueryhtml

React fails to display the content

Starting my React journey with Webpack configuration. Followed all steps meticulously. No error messages in console or browser, but the desired h1 element is not showing up. Aware that React version is 18, yet working with version 17. App.jsx import Reac ...

javascripthtmlreactjswebpack

Blip of an image then vanishes

Within my web application, I have implemented code to display images and allow users to navigate through them using Next and Previous buttons. The functionality works as expected, but there is an issue where the image briefly flashes and then disappears wh ...

javascripthtml

Navigating to a parent URL where the Angular configuration is set can be achieved by following these steps

My application revolves around a webpage created with the use of node and angular. On the root URL (/), I have incorporated a signup and login form without the use of Angular. Upon successful login, Angular scripts and configuration files are loaded on the ...

javascripthtmlnode.jsangularjsangular-routing

Placing an image on a three.js cube using overlay does not function properly

I attempted to superimpose an image onto a cube by utilizing code from GPT chat and Blackbox AI, but in both cases, I encountered a black screen. I saved the code in a file named test.html and tested it on Google Chrome and Opera GX browsers, only to be me ...

javascripthtmlcssthree.js

Could this method of utilizing GET be considered incorrect?

I've been tackling a project and encountered an issue that I was only able to resolve by using the following code snippet: header("Location:messages.php?ID_Conversation=$row[ID]"); Do you think this approach is incorrect? ...

phphtmlsqlget

I'm currently utilizing the react mui package, specifically @mui/x-date-pickers. Could someone kindly provide guidance on how to customize the color of the

I am currently working with MUI in React and using the DatePicker component from the @mui/x-date-pickers library. The version I am using is 6.0.3. I have encountered an issue where, upon selecting the first day, the specified color changes as shown in the ...

cssreactjsmaterial-uidatepicker

Choose the camera when utilizing the navigate.getUserMedia() function

I am currently utilizing the navigate.getUserMedia() method to record video on my mobile device and perform additional processing on it. However, at the moment, it is only capturing video using the front camera. How can I make it switch to the rear facing ...

javascripthtmlhtml5-videovideo-processingnavigator

Ways to clear all CSS rules from a class without deleting the class itself using jQuery

Clear out all CSS properties within a class without actually removing the class itself using jQuery For instance : .ui-widget { font-family: Verdana, Arial, sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; left: 350 ...

jquerycss

What is the best way to determine the size of CSS elements relative to other elements?

Is there a way to calculate the size of an element by using calc() or any other method based on the size of another DOM element? ...

htmlcssdomlayout

Identifying and detecting Label IDs when clicked using the for tag

I am facing an issue with labels and input fields in my code. I have multiple labels that trigger the same input field, but I want to know which specific label triggered the input field. <label id="label1" for="input1">Document1</label> <la ...

javascriptjqueryhtml

What steps can I take to troubleshoot the cause of my browser freezing when I try to navigate to a different webpage

Within this div, users can click on the following code: <div id="generate2_pos" onclick="damperdesign_payload();" class="button">Generate P-Spectra</div> Upon clicking, the damperdesign_payload() function is triggered, leading to a link to an ...

javascripthtml

Can someone please provide me with a Javascript code snippet that accomplishes the same function

<script> document.addEventListener('DOMContentLoaded', function () { const menuItems = document.querySelectorAll('.headmenu li'); menuItems.forEach(function (menuItem) { menuItem.addEventL ...

javascriptcss

Immersive Bootstrap Header Design

I've been attempting to achieve a full-screen background within the header element, but for some reason it's not displaying properly? Code header { position: relative; width: 100%; min-height: auto; text-align: center; color: #fff; ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Trouble exporting to Excel on Chrome and Firefox browsers

I am having an issue with exporting tables to Excel using JS. The <table> tag contains some descriptions and a class (<table class="someClassName" border="0" cellpadding="0" cellspacing="0">). When the table is exported to Excel, the Excel fil ...

jqueryhtmlgoogle-chromefirefoxexport-to-excel

Guide to displaying a template using Vue.js

Incorporating jQuery and vuejs version 2.3.4: https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js The code snippet below demonstrates my current setup: // Instantiating Vue. vueVar = new Vue({ el: '#content', ...

jqueryhtmlvue.js

What is the process for integrating vue-select into the dialog of JqxScheduler?

If you want to customize the JqxScheduler's edit dialog, you can modify the existing containers in the editDialogCreate method. Here is an example: var titleSelector = $(` <div> <div class='jqx-scheduler-edit-dialog-label' ...

htmljqueryvue.jsrenderjqxwidgets

What could be causing this code to fail in making changes to the HTML document?

I tried incorporating the following code into my website: $('.feed-item').append('<p> This is paragraph element. </p>'); You can view it on this page: Test Unfortunately, the code does not seem to be functioning properly. ...

javascriptjqueryhtmlwordpress