When the <div> element appears, it should cause the images below to be pushed downward

I have an HTML file where clicking on an image opens a box with text below it using jQuery. Is there a way to push the images under the box down to ensure that the box never covers an image? It needs to be responsive as well.

Here is the fiddle link:

Below is the CSS code:

#projekte {
    list-style: none;
    text-align: center;
    width: 100%;
}

#projekte li {
    display: inline-block;
    margin: 10px 5px 10px 5px;
    width: 300px;
}

#projekte img {cursor: pointer; width: 300px;}

.beschreibung {
    background-color: #bec3c8;
    display: none;
    width: 100%;
    left: 0;
    position: absolute;
}

Answer №1

It is recommended not to use absolute positioning for the .beschreibung elements as it can disrupt the document flow. Consider modifying your css code to:

.beschreibung {
    background-color: #bec3c8;
    display: none;
    width: 100%;
}

Check out the updated fiddle version (with vertical-align:top as mentioned in the comments)

Answer №2

To adjust the layout, update the position parameter to relative

.beschreibung {
    background-color: #bec3c8;
    display: none;
    left: 0;
    position: relative;
}

With the help of jQuery, you can specify its width as follows:

jQuery(".beschreibung").width("desired width");

SEE DEMO ON FIDDLE

Additionally, remember to hide the previous image description using:-

$("div[id^='projekt']").hide();

Answer №3

To modify the CSS class, simply adjust the property position: relative

.description {
    background-color: #bec3c8;
    display: none;
    width: 100%;
    left: 0;
    position: relative;
}

Answer №4

After some trial and error, I stumbled upon a simple fix. By enclosing the .beschreibung in a div container and setting its width to 100%, the issue was resolved. Check out the updated fiddle link here: https://jsfiddle.net/znt3npqa/9/

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

How to dynamically insert variables into a separate HTML file while creating a VS Code extension

Currently working on a vscode extension, I'm facing an issue with containing the html in a string (like this: https://github.com/microsoft/vscode-extension-samples/blob/main/webview-view-sample/src/extension.ts). It leads to a large file size and lack ...

We are currently experiencing issues with Internet Explorer retrieving data from input type text

My HTML code includes input elements with type="text" like this: <input type="text" class="f_taskname" value=""/> Once the user enters text and hits enter, the following script is triggered: var task_name=$('#filter_body').find('.f_ ...

Strange Data List Phenomenon

Presented here are two distinct datalists, one containing patient filenumbers and the other containing states. <input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number"> <datali ...

Eliminate a specific element from an array that is contained within an object, which is in turn nested within

I encountered an issue with my code concerning data manipulation. The data structure I am working with is as shown below; users: [ { name: 'bolu', features: ['Tall'], }, { name: 'cam', feat ...

Gradually make the table row and its contents disappear as you scroll, based on how hidden the row is within the containing div

Uncertainty clouds my mind as to the practicality of this approach, the potential performance implications, and the frequency of scroll events firing to make this technique viable. Nevertheless, within a fixed height div (overflow-y: auto) lies a table. M ...

Tips for making the height of <select> and <button> elements equal even with padding

I'm trying to make sure that both the 'select' and 'button' elements have the same height. Check out my JS Fiddle here Here's the HTML code: <select><option>...</option></select><button>Button& ...

Looking to enlarge a few CSS classes, but unsure of the best approach

My app has some CSS code that I found, but it's too small. Can anyone help me increase the size by 150%? I am using React-Bootstrap for styling, so I'm looking for a way to enlarge the element without adjusting every attribute in the CSS classes. ...

Issue arises when the logo and navigation menu overlap upon zooming in

I'm facing a couple of issues with the menu on my website that I can't seem to resolve. The code appears to be correct, but the problem arises when a user zooms in on the website, particularly on netbooks. The website logo and the navigation menu ...

Unable to adjust the padding of the material UI Select component

I'm having trouble adjusting the padding of the Select component in order to align it with the size of my other text fields. Despite knowing that I need to make changes to nested components, I have yet to discover a viable solution. <div className ...

Mastering EmberJS 2.7: The Definitive Guide to Binding the 'disabled' Attribute for Buttons

Here is an official guide explaining how to bind a boolean property to the disabled attribute of an HTML element. However, it references a controller in the process. I have a button that, when clicked, transitions the route (it must be a button and not a ...

What is the best way to ensure that bootstrap cards are displayed next to each other when they are dynamically created by Django?

https://i.sstatic.net/KMrO1.pngI have encountered an issue with my Django blog. When I add a new blog post, it appears below the previous posts instead of alongside them, causing a vertical layout rather than a horizontal one. {% extends 'portfolio/b ...

What is the best way to input individual students' CA and exam scores into distinct fields and then calculate their total scores in a separate text field?

As a beginner in jQuery, I am looking for guidance on creating a script that calculates the Total score, Grade, Remark, and Position based on the user input of CAT score and EXAM score. The result should be displayed dynamically once both scores are entere ...

The jscolor feature does not function properly if the form is located at the bottom of the page

I am facing an issue with a form located at the bottom of a long list. The jscolor is not functioning properly in this scenario, but when I move the form above the list it works fine. Any suggestions on how to fix this? <div> <ul> <li ...

Click to enlarge the text on button press

Recently, I've been working on a project involving a table that has a button at the end. My goal is to double the text size of the rows in the table when the button is clicked. As someone who is new to JQuery, this question may sound basic but any hel ...

I'm puzzled by the error message stating that '<MODULE>' is declared locally but not exported

I am currently working with a TypeScript file that exports a function for sending emails using AWS SES. //ses.tsx let sendEmail = (args: sendmailParamsType) => { let params = { //here I retrieve the parameters from args and proceed to send the e ...

Digital clocks created with Javascript for educational purposes, each displaying a unique image array for K-12 students

I am on the lookout for a script that can run a digital clock in a web browser using unique images for each digit. I plan to create a 'Maarten Baas' inspired clock with the children in my technology and design class. The kids will take on the ro ...

Can a website trigger an alarm on a user's iPhone without their permission?

Even though I have limited experience with HTML, CSS, and Javascript, I am curious if it is possible to create a basic website that can trigger an alarm on the user's device by simply clicking a button. For example, imagine a scenario where a user is ...

An error occurred: an unexpected identifier was found when trying to import axios using './lib/axios.js' and require('axios')

I am currently working with a js file: test.js: const axios = require('axios'); console.log('test'); To set up the dependencies, I ran the command npm install This is how my folder structure is organized: test node_modules packa ...

Organizing with dynamic attributes within angularJS

I have been working on creating a spreadsheet using Angular, and I have managed to implement most of the basic features. However, I am facing a challenge with sorting data by a single column within my current data structure. Here is the link to the Plnkr ...

Bootstrap is having trouble displaying the collapsed menu due to the abundance of content on the page

While the menu itself opens without any problems, I am facing an issue where the content within the menu is not visible due to other elements on the page obstructing the view. Ideally, I was expecting the collapsed drop-down menu to appear over the existin ...