Using <ul> and absolutely positioned <li> elements without affecting the height of the parent <div>

After researching extensively, I have yet to find a solution that works for adjusting the height of the parent div to match the absolutely positioned list-item. Is there a way to achieve this?

Currently, I have resorted to adding excessive margin to compensate for the height difference, but I know this is not the correct approach.

The structure of the HTML code is simple:

<div class="home-section products">
  <div id="gallery-container">
    <ul>
      <li class="one"><img src="showcase-five.jpg"></li>
      <li class="two"><img src="showcase-four.jpg"></li>
      <li class="three"><img src="showcase-one.jpg"></li>
      <li class="four"><img src="showcase-three.jpg"></li>
      <li class="five"><img src="showcase-two.jpg"></li>
    </ul> 
  </div>
</div>

I am looking for a solution to adjust the height of the li elements in order to make the .home-section adapt to their height.

If it is allowed, I can provide a link to the development site so you can review the code in question.

Thank you!

htmlcss

Answer №1

Simply put, the answer is no.

An element positioned absolutely is removed from the normal document flow, meaning it won't impact the height of its parent element or affect the positioning of other sibling elements.

To achieve this behavior with <li> tags having position: absolute;, you could explore using Javascript for the desired effect.

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

What could be the reason for the padding not functioning properly on my Bootstrap 5.3 webpage?

What could be the reason for pe-5 not functioning properly? <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050253e233e22">[email protect ...

htmltwitter-bootstrapbootstrap-modalbootstrap-5padding

Seeking ways to ensure my component maximizes available space using Tailwind CSS

I am currently utilizing Tailwind CSS to style a Angular application. The setup is fairly straightforward: app.component.html is responsible for displaying a navigation bar and footer, while the components are shown in the remaining space with an overflow- ...

cssangulartailwind-cssangular-router

there is no minimum height specified for the table

Hey there! I'm working on a dynamic table that I populate using data from my API. However, I'm facing an issue where I want the table to maintain a minimum height when there are only a few results, but I can't seem to make it work. I attemp ...

javascripthtmlcss

JavaScript function to convert a string of characters into a readable time format

Is there a way to input a string in an 'input type="time"' field in my HTML code? <label class="item item-input"> <span class="input-label">Departure Time </span> <input type="time" ng-model="heur ...

javascripthtmltime

Step-by-step guide on permanently updating the text of select options with JavaScript

Here is the code for a select option with different values: <select id="test" onchange="changeContent()"> <option>1</option> <option>2</option> <option>3</option> </select> The javascript function that chan ...

javascripthtml

Upon initial load, the masonry elements on the webpage collapse unexpectedly

Hey there! I'm currently in the process of creating my own personal website - an online portfolio. While this is my first attempt at building a website from scratch, I must admit that I am quite new to HTML, CSS, JavaScript, and PHP. In fact, my know ...

javascripthtmlcsslayoutmasonry

What is the best way to extract the text "TSV SCHOTT Mainz" from HTML using Python?

https://i.sstatic.net/2KDgz.png Hello, I'm struggling to locate the text "TSV SCHOTT Mainz" in the HTML code because I am unsure of which part to target. I have attempted the following: import requests from bs4 import BeautifulSoup # URL of the Bo ...

pythonhtmlpython-requests

Using Jquery Ajax for on-focusout and on-submit actions can be tricky, requiring two clicks for the desired outcome

Greetings, I am currently working on a jQuery and Ajax validation form. In this form, if you enter incorrect values like [email protected] for email and 1111111 for password, it will trigger an Ajax validation notice as expected. However, the issue a ...

javascriptjqueryhtmlajax

Extract the raw text content from nested elements

Working with highlight.js to include a custom CSS code, however, this library automatically adds span tags around the desired text For example: <pre> <code class="language-css hljs" contenteditable="true" id="css-code&quo ...

javascripthtmlcss

How do I navigate to the homepage in React?

I am facing an issue with my routes. When I try to access a specific URL like http://localhost:3000/examp1, I want to redirect back to the HomePage. However, whenever I type in something like http://localhost:3000/***, I reach the page but nothing is dis ...

javascripthtmlcssreactjsreact-router-dom

The Countdown feature is currently only functioning on the initial button and not on any of the other buttons

I could use some assistance. I have a download button with a countdown, but there seems to be an issue with the button's functionality. It only works on the first button, or if the second button is clicked first, it starts the countdown on the first b ...

javascripthtmljquerycss

Unable to iterate through success response of AJAX call using a for loop

Upon receiving a JSON array in an AJAX call, I aim to dynamically display its elements in HTML. Rather than showing the entire array all at once, I wish to iterate through it and exhibit each element separately. Refer to the following code snippet for deta ...

javascripthtmljsonajaxfor-loop

The website content is not visible on Internet Explorer version 10

Issue with Internet Explorer 10 I recently completed a new website for our company: . However, I am encountering some challenges with the site when viewed on IE 10 on Windows 7. For some reason, a large portion of the text is not displaying properly in IE ...

javascripthtmlangularjsinternet-explorer

Troublesome Issue with ngAnimate and ngHide: Missing 'ng-hide-animate' Hook Class

I am working on a case where I need to add animation to a DOM object using the ngHide directive: Check out this example here Within this scenario, I have an array of JSON objects: $scope.items = [ {"key": 1, "values": []}, {"key": 2, "values": [ ...

javascriptcssangularjsng-animate

What is the best way to transfer a PHP variable to a separate PHP page based on its object ID for additional processing?

Currently, I am utilizing a PHP-generated link/button to transfer a variable to the destination page and then using $_GET[''] to retrieve this variable. The anchor tag script looks like this: echo "<a href='miniStat.php?pod=<?php echo ...

phphtmlbootstrap-4

Separating the web address path and extracting just two segments

How do I extract specific parts of a user-entered path in JavaScript? For example, if the user enters the following path: /content/mypath/myfolder/about/images/April/abc.jpg I only want to grab: April/abc.jpg $(document).ready(function(){ $(' ...

jqueryhtmlarrayssplit

Unable to extract information from empty <td> using python and selenium

Currently, I am facing an issue while trying to fetch values from a <tr> using Python Selenium. Specifically, I need these values to be ordered and also identified based on whether they contain the word "PICK" or not. My goal is to determine the exa ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Navigate to the top of the div elements

My goal is to replicate the functionality of . I want a feature where scrolling automatically takes users to the top of the next or previous div. $(window).bind('scroll', function () { $('html, body').animate({scrollTop:$('# ...

javascriptjqueryhtmlscroll

iOS search button with a unique blue outline border

On iOS, I'm seeing a strange blue border that I can't seem to get rid of. see image for reference I've exhausted all options like :focus and :active, but I can't pinpoint the source of the border. I've searched through different ...

htmlcssiosbootstrap-4border

List-group item in Bootstrap 4 featuring an arrow on the right side

Currently, I am utilizing Bootstrap 4 and are in need of developing a list-group featuring a title as well as an arrow positioned on the right side. This is what I currently have: <div class="accordion" id="accordionExample"> & ...

csstwitter-bootstrapbootstrap-4