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

Is it possible for ng-model to verify its own value?

Recently, I've been experimenting with Angular and found myself facing a dilemma. Is it possible to apply a different CSS style based on whether the value of ng-model is greater than 0? `<span ng-model="users2" ng-hide="!myVar" ng-class="{'te ...

cssangularjs

Is it possible to analyze an API call and determine the frequency of a specific field?

Code: var textArray = new Array(); var allText = results.data._contained.text; for (var i = 0; i < allText.length; i++) { var text1 = allText[i]; var textHtml = "<div id='text_item'>"; textHtml += "& ...

javascriptjqueryhtmlcount

Creating a stunning HTML 5 panorama with GigaPixel resolution

Interested in creating a gigapixel panorama using HTML 5 and Javascript. I found inspiration from this example - Seeking advice on where to begin or any useful APIs to explore. Appreciate the help! ...

javascriptjqueryhtmlcss

Improving the pagination performance in AngularJS

I created an HTML template to showcase member details, along with adding pagination functionality to improve initial load time. Currently, I retrieve 15 members from the server at once and display them, allowing users to navigate through more members using ...

javascriptjqueryhtmlangularjspagination

Navigating through dropdown browser menus using VBA

I am looking to automate the process of looping through a dropdown list on a specific website and downloading the latest file for each entry. I have successfully opened the website and clicked the "submit" button, but I am struggling to find a solution to ...

htmlvbaobjectinternet-explorerweb-scraping

Adjust font size using jQuery

Hey there! I have a small question. I want to resize all HTML elements using jQuery, but the current code allows me to increase and decrease the size infinitely. var originalSize = $('html').css('font-size'); // Reset ...

jqueryhtmlcssfont-size

How to instantly return progress bar to zero in bootstrap without any animations

I am currently working on a task that involves multiple actions, and I have implemented a bootstrap progress bar to visually represent the progress of each action. However, after completion of an action, the progress bar is reset to zero using the followi ...

javascriptjquerycsstwitter-bootstrap

The functionality of a button within an AngularJS directive is not functioning as intended

I am trying to use a directive twice on one page. Inside the directive, there is a button that should toggle between showing the two directives when clicked. However, I'm encountering an issue where the values are not changing even though the ng-click ...

javascripthtmlangularjsangular2-directives

Looking to trigger a PHP page by clicking on a div?

Is there a way to trigger a PHP page call when a user clicks on a <DIV> with AJAX? Additionally, can the text of the DIV be changed to display "LOADING....." simultaneously? I lack knowledge about AJAX. Could you please provide me with more details ...

phpjavascriptajaxhtml

PHP Linking Style Sheets

I am exploring the use of an HTML Diff Tool in PHP, specifically looking at this one: https://github.com/rashid2538/php-htmldiff. I am fetching the content of both pages using cURL and passing it to the HTML-Diff tool. It works perfectly fine, but there is ...

phpcss

Ways to add a substantial quantity of HTML to the DOM without relying on AJAX or excessive strings

Currently, I am looking to update a div with a large amount of HTML content when a button on my webpage is clicked. The approach I am currently using involves the .html() method in JQuery, passing in this extensive string: '<div class="container-f ...

javascriptjqueryhtmlajax

Retrieve the name of the product from the corresponding parent element

My goal is to trigger an alert box with the product name when the "Buy now" button is clicked. I have added the necessary code in jquery to maintain the onclick event of the button. <h2 class="product-name"><a href="product1.php" title="Sample Pr ...

javascriptjqueryhtml

What are some techniques for identifying duplicate HTML element IDs?

I encountered a challenging bug that took a lot of effort to resolve, only to discover that it was due to two HTML elements having the same ID attribute. Is there a command available to identify duplicate IDs throughout the entire DOM? Update: After rev ...

javascripthtml

Has anyone figured out the issue with Uplodify? It suddenly ceased to function

For some time now, I've been using uplodify without any issues. Unfortunately, as of yesterday, it suddenly stopped working. I'm at a loss as to what might have caused this sudden change. Could someone please offer me some assistance? I've ...

javascriptphpjqueryhtml

Tips for adjusting text to fit within a container without needing to use overflow:auto

Is there a way to prevent text overflow in a container without using the overflow:auto property? I've come across plugins that automatically reduce the text size, but I'm not keen on that solution. What I want is for long words or URLs to wrap on ...

jqueryhtmlcss

Retrieving Table Characteristics from an Online Source

Currently utilizing Python 3.4, Windows 10, and Visual Studio 2015 for my project. I am in the process of developing a program that scrapes phone numbers from websites similar to this one. My approach involves using Beautiful Soup 4 to extract the number ...

pythonhtmlvisual-studiobeautifulsouppython-3.4

Adding content to an empty element will not produce the desired result

I'm trying to show each character of a string, which is stored in an array, one at a time. However, when I use threadsleep(a) with the code found here: http://jsfiddle.net/thefiddler99/re3qpuoo/, all the characters are displayed at once. There seems t ...

javascriptjqueryhtml

Django CSS graphical interface for selecting styles

I am looking to implement a feature that allows users to select an "interface theme": To enable users to change the theme across all templates, I have created a dropdown in my base.html. For all my HTML templates, I utilize a base.html file by extending ...

cssajaxdjangodjango-templates

Challenges with displaying css/bootstrap classes within angular2

Experiencing difficulties with CSS/Bootstrap integration when displayed in an angular2 component. When attempting to display the CSS and HTML content in the Index.html file (with proper CSS and JS references), everything functions correctly. However, once ...

cssangulartwitter-bootstrap-3angular-ui-bootstrapng-bootstrap

Is it acceptable to utilize the "sticky-top" class in a mobile-friendly navigation bar?

I'm facing an issue with implementing the Sticky-top function on a navbar within a Django project. The navbar is responsive and can be expanded by clicking a button, but I want it to remain fixed at the top when the user scrolls down. Currently, I am ...

cssbootstrap-4