Place a div box beneath another div box that is absolutely positioned, without requiring knowledge of its height

My website features an arrangement of pictures placed within div boxes and positioned absolutely to my liking.

.char1 - .char5 are correctly positioned. Now, I am seeking a way to align .char6 - .char10 directly under .char1 - .char5. Is there a smart approach to achieve this alignment consistently across different screen sizes?

Additionally, the .char divs share similar attributes except for the "left" and "top" positions. Is there a method to streamline these common values?

Thank you in advance.

* {
    background-color: #151515;
}

.h {
    align-self: center;
    width: 96%;
    height 100%;
    border-style: solid;
    border-width: 0px;
    border-color: 817B6F;

}
.chars {
    display: flex;
    width: 10%;
    height: auto;
    background-color: 817B6F;
    position: absolute;
    top: 10%;
    left: 25%;
}


    .char1 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    left: 21.5%;
    border-top-left-radius: 5px;
    padding: 0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}
.char2 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    left: 32.9%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;

}

.char3 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    left: 44.3%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;

}

.char4 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    left: 55.7%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

.char5 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 10%;
    height: auto;
    left: 67.1%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    border-top-right-radius: 5px;
}

.char6 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 33%;
    height: auto;
    left: 21.5%;
    border-bottom-left-radius: 5px;
    padding: 0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

.char7 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 33%;
    height: auto;
    left: 32.9%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;

}

.char8 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 33%;
    height: auto;
    left: 44.3%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;

}

.char9 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 33%;
    height: auto;
    left: 55.7%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

.char10 {
    justify-content: center;
    display: flex;
    background-color: 817B6F;
    position: absolute;
    width: 10%;
    top: 33%;
    height: auto;
    left: 67.1%;
    padding:0.7%;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    border-bottom-right-radius: 5px;
}
<div class="char1">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char2">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char3">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char4">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char5">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char6">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char7">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char8">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char9">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

<div class="char10">

<img class= "h" name= Warrior src="http://placehold.it/256" />
</div>

htmlcsscss-positionabsolute

Answer №1

Avoid relying on absolute positioning for layout, particularly in responsive design scenarios. Opt for relative or static positioning instead, utilizing margins to achieve the desired placement. This way, your elements will follow a more natural flow within the DOM.

Furthermore, consider adhering to the DRY principle (Don't Repeat Yourself). Instead of creating individual styling rules for each box, use a single class for all boxes and style them accordingly.

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 is the process of retrieving a dynamic array value based on checkbox selection in AngularJS?

I need help with a situation where I am trying to use Angular to get the value of a checkbox. I have a Java object on my HTML page and when a user checks an individual box, that single value should be added to my array. If the user checks 'Select All& ...

javascriptjqueryhtmlangularjsarrays

Customize the Underline Color in MaterialUI Select Component

I'm experimenting with MaterialUI and trying to figure out how to customize the underline and text color of the Select component when an item is selected. Currently, the underline and label appear blue after selection with a gray background. Is there ...

cssreactjsmaterial-ui

Using CSS to justify the final line of content

I have created a CSS helper class that is meant to justify-align the last line of text, or inline block divs, along with the rest of them. Here is the CSS code I have implemented: .justify-all-lines { text-align: justify; /* IE-only properties th ...

css

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

Issue with the initial element in CSS and the cause remains a mystery

"first of type" dont like to work: .elements { width:70%; margin:0 auto; display:flex; flex-direction: column; .addElement { width:280px; text-align: center; border:1px solid black; font-family: ...

css

The image displays successfully on desktop, however, it fails to load once the website is deployed on GitHub or Netlify

While developing this website on my Mac, I encountered an issue where images load fine when I copy the project path from Atom to Chrome. However, once I push the same code to GitHub and then publish it on Netlify, the image fails to load. Does anyone kno ...

htmlcss

jQuery: Managing and modifying values for dynamically generated input elements

Hello, I am currently working with the latest version of jQuery and have a table set up where clicking on the "Add" button appends a row of inputs. My goal is to calculate the total price for each particular product based on keyup events (i.e., qty * price ...

javascriptphphtmljqueryajax

Problem arising from animation not commencing at expected starting point

Creating a feature on an app that involves breathing exercises using CSS animations. The challenge I'm facing is ensuring the words "exhale" and "inhale" appear synchronously with the animation of a circle shrinking and enlarging. However, the animati ...

javascripthtmlcssanimation

Tips for utilizing vulnerable web scripts on SSL-enabled pages

After implementing SSL to secure my pages, I encountered an issue where one of my scripts no longer functions properly. Specifically, I had a script on my page that was used to display the visit count from this website. Previously, it was functioning fla ...

phpjavascripthtmlweb-applicationsssl

Challenges Arising from the Featured Image Dimensions in WordPress

I'm currently experimenting with the featured image on this website powered by WordPress. The issue I'm facing is that the image is using a custom size instead of the size I intended. Additionally, it seems to be inheriting the characteristics of ...

phphtmlcsswordpressimage

What steps can I take to ensure a JavaScript loading image is displayed until the entire page has finished loading?

Looking to implement a JavaScript loading image that displays until the page has fully loaded? I'm currently developing an online antivirus scanner and in need of help. I am trying to set up JavaScript to show a loading image while a file is being up ...

javascriptphphtmlcss

Craft a stunning transparent border effect using CSS

I am trying to achieve a unique border effect for an element using CSS, where the transparency is maintained against the background: This is the desired outcome: https://i.stack.imgur.com/6Z1MU.png However, the border I am currently able to create looks ...

htmlcssborder

Struggling to align my image and text next to each other in three different sections using Bootstrap

Having difficulty aligning my images to the left of each block of text, they keep appearing underneath. I am utilizing col-md-4 for three sets of text and image. .container { float: left; display: block; } <div class="container"> <!--Row ...

htmlcsstwitter-bootstrap

Displaying nested arrays correctly

My latest endeavour involves constructing a data tree in Vue, utilizing components. Let's examine the provided data snippet: "data": [ { "id": 1, "name": "foo", "children": [ { "id": 2, "name": "bar", "children": [] } ...

javascripthtmlvue.jsvuejs2

I'm having trouble with my sticky position in the code. I tried setting it to the left side, but it's not behaving as

While I am delving into Bootstrap, HTML, and CSS to enhance my skills, I have hit a snag. My intention was to make the sidebar sticky but it seems to stubbornly stick to the left instead. Despite attempting to apply "position: sticky" and setting "left: 0" ...

htmlcsscss-positionbootstrap-5

JavaScript decimal precision function malfunctioning with currency format conversion

My current snippet works perfectly with the currency format 249.00, but I need to adapt it for a site that uses euros with pricing in the format 249,00. When I make this change, the total calculation goes haywire and shows as 29.900,00. Can someone advise ...

javascripthtml

Tips for showcasing a search bar on Google search results

While browsing in Google, I came across websites that have a search bar displayed after their initial search result. This functionality allows users to easily search within the website as shown in the image below. I am intrigued and wondering how this can ...

html

Is it possible to add a class to the parent element when the input value of a sub-child element is

Is there a way to select and add a class to an li element in which the sub-child input is empty when clicking on button #btn-modal-clear? If so, what is the best approach to achieve this? Example HTML Code: <li>...<li> <li> <a c ...

javascriptjqueryhtmlcss

"Troubleshooting a Animation Problem in the Latest Version of

I have discovered an issue with animations on the latest version of Firefox Quantum. Upon loading a page with certain animated elements set to display: none;, when a script changes it to .display = "block";, some parts of the animation may be missed or no ...

javascriptcssfirefoxfirefox-quantum

What is causing these divs to shift apart instead of staying next to each other when the browser window is resized?

I am facing an issue with two of my divs not staying next to each other when resizing the browser window. They align perfectly when the window is wide, but as soon as I resize it to a narrower resolution, the right div moves below the left one: http://jsfi ...

htmlcsscss-floatwidth