Arranging five divs within one main div horizontally with equal margins between them

I am currently working on a website system where I need to place 5 divs within 1 main div horizontally. However, I want the spacing between the 5 divs to be equal and fixed within the main div. Below is how my current page looks:

https://i.stack.imgur.com/OxdxU.png

From the image above, I would like to align all 5 divs within the main div, with "SUSTAINABILITY" positioned at the red line. Here is my current code:

<div class="prolist">

<div class="col2 left paddingLR">
    <div class="item2 aligncenter">
    <div class="iteminner bgP">
        <div class="itemcircle"><a href="/financial-summary-p-815/"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/financial.jpg" alt="" /></a></div></div>
    <h5>FINANCIAL Information</h5><a href="/financial-summary-p-815/">read more..</a></div></div>
<div class="col2 left paddingLR">
    <div class="item2 aligncenter">
    <div class="iteminner bgB">
        <div class="itemcircle"><a href="/annual-report-p-817/"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/img-financial-report.jpg" /></a></div></div>
    <h5>ANNUAL<br />
        REPORT</h5><a href="/annual-report-p-817/">read more..</a></div></div>
<div class="col2 left paddingLR">
    <div class="item2 aligncenter">
    <div class="iteminner bgO">
        <div class="itemcircle"><a href="/corporate-calendar-p-823/"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/calendar.jpg" alt="" /></a></div></div>
    <h5>Corporate Calendar</h5><a href="/corporate-calendar-p-823/">read more..</a></div></div>
<div class="col2 left paddingLR">
    <div class="item2 aligncenter">
    <div class="iteminner bgG">
        <div class="itemcircle"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/IR circle picture.JPG" alt="" /></div></div>
    <h5>CORPORATE PRESENTATION</h5><a target="_blank" href="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/IR Presentation/TG Website_English_240420.pdf"> English</a> /<a target="_blank" href="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/IR Presentation/TG Website_Chinese_240420.pdf"> Chinese</a><br />
    </div></div>

<div class="col2 left paddingLR">
    <div class="item2 aligncenter">
    <div class="iteminner bgB">
        <div class="itemcircle"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/sustain_icon.jpg" alt="" /></div></div><br />

    <h5>SUSTAINABILITY</h5><a target="_blank" href="/sustainability/"> read more..</a></div></div>
</div>

I would like the layout to be similar to this (just a sample):

https://i.stack.imgur.com/yogfr.png

Can anyone assist me with this? Thank you!

htmlcss

Answer №1

It would have been greatly appreciated if you had provided the CSS code used for this page. However, I have come up with a quick fix that might do the trick:

.prolist {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   width: 100%;
}

If you had previously added margins to create space between each element, you can remove them now as this code will ensure equal spacing between them. If this solution does not work as intended, please share the CSS code you initially used for further assistance.

Answer №2

One way to achieve this is by utilizing the flex property.

.product-list {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
}

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

Challenges arise when transferring data retrieved from a table into a bootstrap modal window

I have been attempting to transfer values from a table into a modal. Initially, I successfully displayed the <td> values in an alert when a button was clicked on a specific row. Now, I am aiming to take it a step further by having these <td> va ...

javascriptjqueryhtmlbootstrap-4

Embed the Nest API into your HTML5 code

My mobile HTML5 application includes a script in the index.html file. Nest.js (code below) Whenever I run my application, I encounter an error stating that Firebase is not defined. This is odd because the function seems simple: --> var dataRef = new ...

javascriptnode.jshtmlfirebasenest-api

Enter information to accompany your images in the description box

After browsing through numerous websites tonight, I stumbled upon this code. My goal is to create a photo upload page on Google Drive and set up a dropbox for it. I'm facing an issue where the information inputted into my placeholder box (city and ye ...

javascripthtmlgoogle-apps-script

Revamp the Bootstrap Carousel Control by replacing the default navigation arrows with stylish arrows featuring circle backgrounds

Looking to update the appearance of the carousel icons in Bootstrap 4? How about changing them from simple arrows to arrows with dark semi-opaque circles underneath? If you're wondering how to achieve this modification, keep in mind that the icons ar ...

csssvgbootstrap-4

"ExceptionThrownByMoveTargetOutOfBounds in Selenium WebDriver for IE9 and Firefox

Having trouble with the FireFox/IE9 driver in Selenium? When using the Actions class and its moveToElement method, I keep encountering a MoveTargetOutOfBoundsException error. Despite trying different solutions like Coordinates, Point, and javascriptexecuto ...

javascriptcssinternet-explorerfirefoxselenium

Achieving Div Alignment in a Fluid Bootstrap Grid

I am currently utilizing the bootstrap grid system, as depicted below, and I am attempting to center some div elements (pic). Despite my attempts with various CSS properties like {margin:0 auto; width:50%}, I am unable to achieve the desired result. I fi ...

htmlcsstwitter-bootstrapcentering

Is there a way to retrieve the href attribute from an <a> tag using PHP?

Similar Question: Retrieving the href attribute of an Anchor Element Provided hyperlink $link="<a href='test.php'>test</a>"; Is there a way to extract href and anchor text using PHP? ...

phphtml

Android Gmail Application: Implementing 1px horizontal spacing between inline images placed within <td> tags

Have you ever noticed that in the Android Gmail app, there can be a mysterious 1px gap between inline images? This little pixel problem can sometimes push the rightmost image outside the comfy frame of your email. It seems this glitch prefers images of cer ...

androidhtmlemailgmail

In Firefox, the functionality of applying background-position-y to a label when it is immediately preceded by a checked input[type=radio]

CSS selector input[type=checkbox]:checked + label is not functioning properly in Firefox browser! label { display: block; font-family: 'Muli'; font-size: 14px; color: #666; vertical-align: top; background: url("https://s31.postimg. ...

htmlcssfirefoxbackground-position

Share an image using only the publish_actions authorization

There are some apps I've come across that only request access to users_photos and publish_actions (not publish_stream or photo_upload). Surprisingly, they are able to upload photos without being approved for User Generated Photos (e.g. Instagram). Wh ...

htmlfacebookfacebook-opengraph

Discovering the chosen value from an asp.net radio button control based on its class can be accomplished using Jquery

Currently, I am working with a radio button control that is defined like this: <asp:RadioButtonList ID="rbQ2" CellSpacing="10" runat="server" class="rbQ2" CssClass="radioButtonList" RepeatDirection="Horizontal" RepeatLayout="Table" onclick="javascript: ...

jqueryhtmlasp.net

Guide on how to position a single anchor at the center of a div alongside other elements

I am having trouble centering an anchor on my webpage. I have tried using text-align: center;, but it always puts the link on a new line due to the required div element. Other methods like margins and spans have not worked for me either. span.right { ...

htmlcssbootstrap-5

Locate specific phrases within the text and conceal the corresponding lines

I have a JavaScript function that loops through each line. I want it to search for specific text on each line and hide the entire line if it contains that text. For example: <input id="search" type="button" value="Run" /> <textarea id ...

javascriptjquerycss

Utilizing CURL for PHP to extract information from any webpage

Can a PHP function be created to generate an HTML string of any link like a browser does? For example, links such as "", "", "mywebsite.com", "somesite.com/.page/nn/?s=b#85452", "lichess.org" What I have attempted: $curl = curl_init(); curl_setopt($curl, ...

phphtmlparsingcurl

Unpredictable Redirection when URL is Clicked using PHP or Javascript

Looking to send users to a random URL from a specific list? For instance: With 3 URLs available - Google.com, Facebook.com, and Yahoo.com <a href="<?php $sites[array_rand($sites)] ?>">Click here</a> Upon clicking the link, users will ...

javascriptphpjqueryhtmlajax

Angular 14: Exploring the left datepicker panel navigation in PrimeNG

In my situation, I am trying to adjust the position of the date-picker in relation to a panel displayed within a <p-calendar> element. Due to a splitter on the right side, I need to shift the date-picker towards the left. Here is the HTML code: < ...

cssangulardatepickercalendarprimeng

Extracting information from several span elements within the main span class using BeautifulSoup

I'm currently attempting to extract data from the following HTML code: <span class="double-line-ellipsis"> <span> ₹ 2800 for 2 (approx) </span> <span> | </span> <a data-w-onclick="stopClickPropagation|w1-re ...

pythonhtmlweb-scrapingbeautifulsoup

Control the movement of the mouse pointer using javascript

For my University presentation on click-jacking, I came across an intriguing example that I wanted to replicate but didn't know where to start. The whole concept seemed very complex to me. To get a better idea, please take a look at this video: https ...

javascriptjqueryhtml

Extract the identifier of the class and subsequently pass it to the PHP script

How do I retrieve the id of a dynamically created class within a while loop, where the id corresponds to the user who posted it, and then send this id to PHP? Here's exactly what I'm trying to achieve: HTML: <div class='lol' id=&a ...

phpjqueryhtmlajaxpost

Activate scroll event when image src changes in Angular using jQuery

Seeking assistance with utilizing jQuery to scroll to a specific thumbnail inside a modal when left/right arrows are pressed. The modal should appear when the user clicks on an image. I've managed to implement scrolling upon clicking a thumbnail, but ...

javascriptjqueryhtmlangularjs