Arranging divs beneath other elements using CSS positioning without needing to modify the HTML code

i need to align the list elements under the menu items, but the layout crashes when the fourth item is displayed. I can't change the HTML code without affecting the layout of my app. Is there a way to dynamically hide and show the elements on the page while maintaining the right spacing between them? Flexbox might be a solution. Thank you!

Here is the CSS code:

 #navigation {
      width:100%;
    }

    /*Menu Items (Containers, Bulky Waste, Assessments, Service)*/     
    #navigation h3 {
          font-size: 1.3rem;
          float:left;
          height: 22%;
          width: 14%;
          margin-left: 10%;         
          background-color: #edf3d0;
          border-top-right-radius: 15px;
          border-bottom-left-radius: 15px;
          border-left: solid 8px transparent;
          border-right: solid 8px transparent;
          margin-top: 3rem;
        }


        #navigation > h3:nth-child(1) {
            margin-top: 3rem;
        }

        #navigation h3 {
            border-left: solid 8px #a4c412;
            border-right: solid 8px #a4c412;
        }

        /*** List under Containers Menu Item ****/
        #navigation > div.dropdown.behaelter_content {
            left: 10%;
        }
        /*** List under Bulky Waste Menu Item ****/
        #navigation > div.dropdown.sperrmuell_content {
           left: 35%
        }
        /*** List under My Area Menu Item ****/
        #navigation > div.dropdown.mein_bereich_content {
           left:60%;
        }

        /**** Hidden: Assessments ***/
        #navigation > div.dropdown.veranlagungen_content {
          left:85%
        }

    .dropdown {
        width: 15% !important;
        position:fixed;
        top: 60%;
        float: left;
    }
    <div id="navigation" class="center">

        <h3 id="behaelter" class="behaelter_content ">
            ...
        </h3>

        <div class="dropdown behaelter_content ">
            ...
        </div>

        <h3 id="sperrmuell" class="sperrmuell_content">
            ...
        </h3>
        <div class="dropdown sperrmuell_content">
            ...
        </div>

        <h3 id="veranlagungen" class="veranlagungen_content">
            ...
        </h3>
        <div class="dropdown veranlagungen_content">
            ...
        </div>

        <h3 id="mein_bereich" class="mein_bereich_content">
            ...
        </h3>
        <div class="dropdown mein_bereich_content">
            ...
        </div>

    </div>
jqueryhtmlcss

Answer №1

It seems like you've already found a solution to your question by mentioning the possibility of using Flexbox. By adding display:flex to your container #navigation, you should see the desired results. I have tested this on Codepen and it appears to be functioning correctly: http://codepen.io/anon/pen/qrOaVJ. Take a look and share your thoughts with me.

Expanding on this solution, for your #navigation, you can include the following CSS:

#navigation {
  display:flex; //defining it as a flex container
  flex-wrap:nowrap; //ensures items stay on the same line
}

For additional resources and a comprehensive guide to Flexbox, I recommend checking out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer №2

Discovered a clever approach using jQuery's position() function

var lefts = $("#navigation > h3.sperrmuell_content").position().left;
$("#navigation > div.dropdown.sperrmuell_content").css("left", lefts);

Plus

 #navigation > div
    {
        margin-left:100px;
    }

This ensures consistent spacing between the lists and menu items above :)

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

Fill Dropdown Menu Using Data Retrieval From Database

I am trying to figure out how to populate a drop down list (also known as a Select element) with data from a SQL Server query. The goal is to fill the list with results from Select storeName from storeinfo, which should give around 30 items that I want di ...

phpjqueryhtmlajax

Denied running the inline script in Redocly

Experimenting with redoc-cli (https://github.com/Redocly/redoc/) in order to generate static documentation. Unfortunately, encountered some stumbling blocks due to errors related to the Content-Security-Policy, which seems to be blocking JavaScript code ex ...

javascripthtmlcontent-security-policy

Can two BootstrapVue tooltips be displayed on a single element with different target settings?

While working in Vue with BootstrapVue, I encountered a problem where the bottom 2 tooltips that I am using both appear on the button targeted by the click to mask this value button. The tooltip containing the SSN is also only appearing on top of the butto ...

htmltwitter-bootstrapvue.jsbootstrap-vue

activate the button once valid input has been provided

How can I enable a button based on the amount entered? Let's say there is a minimum of 100 and a maximum of 200. If the user enters an amount below 100, display an error message and keep the button disabled. If the user enters an amount above 200, ...

javascripthtmljquery

What is the best way to include default data in a jQuery AJAX request?

I need help sending a form full of inputs along with a specialVariable in the same AJAX request. How can I achieve this? $.ajax({ method: "POST", url: "some.php", data: { somethingSpecial: specialVariable" } }) ...

jqueryajaxformspost

how to handle form submission using JavaScript's return method

As a developer, I have created a single page that fetches data from a registration page. On this page, each data row has an "add" and "unfriend" button, with the latter initially disabled. When a user clicks the "add" button, a prompt box appears asking ...

javascriptphphtmlforms

Sending an array from an external JavaScript file to a specific route

Currently, I am developing an application using Node.js with Express that displays images from a database. I am now focusing on implementing the feature to create albums from the displayed images by clicking on them. The IDs and names of the images are st ...

jquerynode.jsroutesexpress

I am unable to retrieve dynamic data from the database

Storing data in a MySQL database has been successful for me. I've been utilizing PDO in PHP to fetch the data and then converting it to JavaScript using json_encode. However, I keep encountering the output NaN when implementing a specific scenario. It ...

javascriptphpjquery

Guide on developing a JavaScript script for implementing across numerous Bootstrap modals within a single webpage

I have been working on setting up a page with 14 different modals. Initially, all the modals were opening normally, but I recently discovered a way to make them draggable when opened. After some trial and error, I managed to implement this feature successf ...

javascripthtmlcssbootstrap-4bootstrap-modal

Ways to receive responses from PHP with jQuery AJAX

Hey there, I'm currently working on echoing specific messages from my PHP code back to my AJAX function. Usually, I only have one message to echo, but this time I have two. I'm not sure how to assign each echo to a different .html() element. $(" ...

phpjqueryajaxecho

Implement CSS styling to specific elements

In this snippet of HTML code - <td col="Contact"> <span class="contactInfo"> 35373726<br> 65837366 </span> </td> <td col="Contact"> <span class=&qu ...

jquery

Retrieving information from a DELETE request using PHP

I have successfully implemented a jQuery plugin for uploading multiple files. However, I am facing an issue with deleting images. When using Firebug, it shows that the JavaScript is sending a DELETE request to the function. How can I retrieve data from thi ...

phpjquerycodeigniter

The strange behavior of !important, display:none, and .height()

While working with a piece of JS code yesterday, I stumbled upon something peculiar. There was a div element that was initially hidden using display:none, and I was utilizing its height in some JavaScript calculations. Everything was functioning properly u ...

javascriptjquerycss

Fetching information through AJAX in NodeJS and saving it in a database

I am facing an issue with retrieving data from the client side in my NodeJS application. I have prepared JSON data on the client side, which can be viewed in this codepen link. On the server side, I am attempting to receive this data from the client: var ...

jquerymysqlajaxnode.jsbody-parser

A Step-by-Step Guide on Adding Content After the Bootstrap Slider Using Absolute Position

Check out my project here: I'm currently working on a bootstrap carousel that has absolute positioning and a z-index of -1. However, I'm facing an issue where I can't figure out how to place a div right after the carousel. I've tried s ...

jqueryhtmlcsstwitter-bootstrapcarousel

The CSS3 rotation transform will rotate by an angle of n degrees

I'm currently working on a cube-like element made up of 4 divs that I am rotating using CSS3 transforms (limited to -webkit for a Chrome extension). But there's an issue, if you visit http://jsfiddle.net/CxYTg/ and click through "one", "two", "t ...

htmlcsscss-transforms

What strategies can I use to reduce the amount of event listeners assigned to buttons in jquery?

Currently, I am utilizing jquery 1.6.2 for my project. On one of the pages, I have a structure that resembles the following: <div id="section1"> <fieldset> <ul> <li> <input type="radio" name ...

javascriptjquery

I'm looking for a recommendation for a canvas library that can handle basic 3D rendering

I'm looking to create a basic preview of a Minecraft character with the correct texture applied, without worrying about advanced animations or detailed lighting at this point. I prefer to use canvas rather than relying on WebGL, which is not widely su ...

htmlcanvas3dtexturestexture-mapping

Master the art of zeroing in on your drawing once it's complete

Please review the Demo and provide instructions on how to enhance the zoom function for Google Maps after the map is drawn. let map; let drawingManager; $(document).ready(function () { const latlng = new google.maps.LatLng(49.241943, -122.889318); ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

css - aligning text below another text in the center

Looking to style a text in a specific color with a message about another text below it? Want the text centered but not sure how to position it correctly? margin: 0px auto; If this code isn't delivering the desired result and is positioning your text ...

csscenter