Align two sets of five columns side by side in the center

I'm having trouble aligning two rows of five columns next to each other.

Here is the code snippet (https://jsfiddle.net/anhuxthz/):

body {
  overflow: hidden;
  margin: 40px 15px;
  font-family: Arial, sans-serif;
  font-size: 12px;
}
#distribution {
  position: absolute;
  margin-right: 10%;
  margin-left: 5%;
  border: 1px solid black;
  margin-bottom: 10%;
  width: 90%;
}
input {
  width: 10%;
  /*margin-left: 5.5%;*/
}
.imgCat {
  height: 15%;
  width: 15%;
  /*margin-left:1%;*/
}
span {
  font-weight: bold;
}
.group {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3px;
  margin-bottom: 3px;
  text-align: center;
}
<div id="distribution">
  <div class="group">
    <img src="~/Images/financiering.png" class="imgCat">
    <p>Algemene financiering</p>
    <input type="text" class="dFinan" value="0" readonly />
  </div>  
  <div class="group">
    <img src="~/Images/care.png" class="imgCat">
    <p>Zorg en opvang</p>
    <input type="text" class="dZorg" value="0" readonly />
  </div>
  <div class="group">
    <img src="~/Images/house.png" class="imgCat">
    <p>Wonen en ruimtelijke ordening</p>
    <input type="text" class="dWonen" value="0" readonly />
  </div>
  <div class="group">
    <img src="~/Images/police.png" class="imgCat">
    <p>Veiligheidszorg</p>
    <input type="text" class="dVeiligheid" value="0" readonly />
  </div>
  <div class="group">
    <img src="~/Images/culture.png" class="imgCat">
    <p>Cultuur en vrije tijd</p>
    <input type="text" class="dCultuur" value="0" readonly />
  </div>
  ...
</div>

htmlcss

Answer №1

Is this what you were looking for?

In the code provided, I modified the .group divs by setting their display property to inline-block and giving them a width of 20% (subtracting 6px to offset the inline white space created by the markup)

html {
}
body {
    overflow: hidden;
    margin: 40px 15px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
#distribution {
    position: absolute;
    margin-right: 10%;
    margin-left: 5%;
    border: 1px solid black;
    margin-bottom: 10%;
    width: 90%;
}
input {
    width: 10%;
    /*margin-left: 5.5%;*/
}
.imgCat {
    height: 15%;
    width: 15%;
    /*margin-left:1%;*/
}
span {
    font-weight: bold;
}
.group {
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    width: calc(20% - 6px);        /*  added style  */
    display: inline-block;         /*  added style  */
}
<div id="distribution">

        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>General financing</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">

            <img src="~/Images/care.png" class="imgCat">
            <p>Healthcare and support</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>

        <div class="group">
            <img src="~/Images/house.png" class="imgCat">
            <p>Housing and spatial planning</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/police.png" class="imgCat">
            <p>Public safety</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/culture.png" class="imgCat">
            <p>Culture and leisure</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>General financing</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">

            <img src="~/Images/care.png" class="imgCat">
            <p>Healthcare and support</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/house.png" class="imgCat">
            <p>Housing and spatial planning</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/police.png" class="imgCat">
            <p>Public safety</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/culture.png" class="imgCat">
            <p>Culture and leisure</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
</div>

You could also achieve the same layout using flex, setting the width of the elements to 20% without needing the extra spacing adjustment due to flex items not rendering whitespace like inline-block does.

html {
}
body {
    overflow: hidden;
    margin: 40px 15px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
#distribution {
    position: absolute;
    margin-right: 10%;
    margin-left: 5%;
    border: 1px solid black;
    margin-bottom: 10%;
    width: 90%;
    display: flex;         /*  added style  */
    flex-wrap: wrap;       /*  added style  */
}
input {
    width: 10%;
}
.imgCat {
    height: 15%;
    width: 15%;
}
span {
    font-weight: bold;
}
.group {
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    width: 20%;            /*  added style  */
}
<div id="distribution">

        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>General financing</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">

            <img src="~/Images/care.png" class="imgCat">
            <p>Healthcare and support</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>

        <div class="group">
            <img src="~/Images/house.png" class="imgCat">
            <p>Housing and spatial planning</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/police.png" class="imgCat">
            <p>Public safety</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/culture.png" class="imgCat">
            <p>Culture and leisure</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>General financing</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">

            <img src="~/Images/care.png" class="imgCat">
            <p>Healthcare and support</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/house.png" class="imgCat">
            <p>Housing and spatial planning</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/police.png" class="imgCat">
            <p>Public safety</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/culture.png" class="imgCat">
            <p>Culture and leisure</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
</div>

Answer №2

Group each set of 5 div containers within a "row" container, and set the display property of each group to float:left.

Keep in mind that when you apply float:left to the group containers, they may lose their height. To address this issue, add overflow:hidden to the parent container. For more information, refer to this explanation of clearfix.

CSS:

.group { float: left; width: 19.5%; }
.row { overflow: hidden; }

Example structure:

View Demo on jsFiddle

or

html {
}

body {
    overflow: hidden;
    margin: 40px 15px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
.group { float: left; width: 19.5%; }
.row { overflow: hidden; }
input { max-width: 90%; }
<div id="distribution">
<div class="row">
        <div class="group">
            <img src="~/Images/finance.png" class="imgCategory">
            <p>General Financing</p>
            <input type="text" class="dFinance" value="0" readonly />
        </div>  
        <div class="group">
            <img src="~/Images/care.png" class="imgCategory">
            <p>Healthcare Services</p>
            <input type="text" class="dCare" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/home.png" class="imgCategory">
            <p>Housing and Urban Planning</p>
            <input type="text" class="dHousing" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/police.png" class="imgCategory">
            <p>Security Services</p>
            <input type="text" class="dSecurity" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/culture.png" class="imgCategory">
            <p>Culture and Leisure</p>
            <input type="text" class="dCulture" value="0" readonly />
        </div>
  </div> <!-- .row -->

  <div class="row">
        <div class="group">
            <img src="~/Images/finance.png" class="imgCategory">
            <p>General Financing</p>
            <input type="text" class="dFinance" value="0" readonly />
        </div>  
        <div class="group">
            <img src="~/Images/care.png" class="imgCategory">
            <p>Healthcare Services</p>
            <input type="text" class="dCare" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/home.png" class="imgCategory">
            <p>Housing and Urban Planning</p>
            <input type="text" class="dHousing" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/police.png" class="imgCategory">
            <p>Security Services</p>
            <input type="text" class="dSecurity" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/culture.png" class="imgCategory">
            <p>Culture and Leisure</p>
            <input type="text" class="dCulture" value="0" readonly />
        </div>
  </div><!-- .row -->
</div><!-- #distribution -->

Answer №3

Have you given the table a shot?

<center>
<table>
<tr>
<td>First Column</td>
<td>Second Column</td>
<td>Third Column</td>
<td>Fourth Column</td>
<td>Fifth Column</td>
</tr>
<tr>
<td>First Column</td>
<td>Second Column</td>
<td>Third Column</td>
<td>Fourth Column</td>
<td>Fifth Column</td>
</tr>
</table>
</center>

Answer №4

(update: 2 x 5, not the reverse)

Implement this CSS code to achieve your desired layout (utilizing flex and wrap)

#distribution {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
.group {
  width: 20%;
}

Working example: https://jsfiddle.net/b746Lz7m/2/

Answer №5

If you're looking to improve the layout of your website, consider using flex boxes. Here's a helpful guide: https://example.com/flexbox-guide

To implement this, wrap your columns in a column div and include the following CSS code:

#distribution {
  display: flex;
  align-items: center;
}

.column {
  flex-direction: column;
  align-items: center;
  margin: auto;
}

Simply follow these steps and your layout should look great!

Answer №6

I made some modifications to your fiddle.

https://jsfiddle.net/xyzabc123/4/

.container {
  width: 800px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
}

.box {
  float: left;
}

To achieve a centered layout, you should wrap your items in a container element and give it a fixed width. This will allow you to use margin: 0 auto; for center alignment. Apply floating to the items inside the container for proper alignment.

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

Initiating a web-based compiler directly through a browser using any method possible

Currently, I am developing a web-based educational tool that allows students to view code examples in a browser and edit them directly within the browser. I have been exploring ways to incorporate a client-side compiler so that they can run and debug the c ...

pythonhtmlcompiler-constructioncross-browser

Ways to recycle a section of Javascript for multiple uses on a single page

As a newcomer to website building, I have a query regarding the usage of a JavaScript function designed for a slideshow. My one-page website comprises multiple slideshow units with their own divs, holders, and counters (e.g., 1/4). A JavaScript code contro ...

javascripthtmljqueryslideshowreusability

Concealing specific items in the dropdown choices with AngularJS

My goal is to assign two crews using the data retrieved from the server. When I choose an item in one drop-down menu, I want that option to be removed from the next drop-down menu. ...

htmlangularjs

Adding a layer to an HTML element causes CSS to malfunction

I am encountering an issue with my HTML code. Initially, it looks like this: <div style=" display: grid; grid-template-columns: 200px 200px 200px;"> <button style="width:100%; height:100%" *ngFor="let valu ...

htmlcssangular

A guide on retrieving real-time data from PHP using Ajax

Being new to Ajax, I am struggling to grasp how to retrieve changing variable values from php. Below is the code snippet that I have been working on: <?php $pfstatetext = get_mypfstate(); $cpuusage= cpu_usage(); ?> <div id="show"> <c ...

javascriptphphtmlajax

Is anyone else experiencing issues with their imagemap due to Twitter Bootstrap?

I'm excited to ask my first question here as a beginner. I am truly grateful for all the assistance and guidance I have received from this site. I hope that the questions I ask can also benefit others in some way :) Although imagemaps may not be used ...

csstwitter-bootstraptwitter-bootstrap-3imagemap

Guide to showcasing user input using a Javascript function

I need assistance to show the user input via the submit button. Users will enter tool types and the first five inputs will be displayed in list items (li). Once the limit of 5 tools is reached, a message 'Thanks for your suggestions' should appea ...

javascripthtml

Modify font color in collapsed state of bootstrap navbar dropdown

I've been attempting to modify the font color displayed in the image to ensure it stands out clearly. https://i.sstatic.net/e6VdG.png This is a simple bootstrap 3 navbar. Here's the HTML code: <nav class="navbar navbar-custom"> ...

csstwitter-bootstraptwitter-bootstrap-3

Is it possible to handle parsing of partial xml text within JavaScript using the newest version of Firefox?

After reviewing the responses, it appears that DOMParser may struggle with handling incomplete and not well-formed XML data. Considering most major browsers can manage faulty HTML source code, I am curious if there is a workaround to have the browser inte ...

htmlxmlfirefoxdoctypedtd

Display Further/Hide Fewer every third item using Jquery

I am looking to display only the first 3 list items within each div.content. Then, upon clicking "SHOW MORE", I want to reveal the next 3 items. If the user clicks on "SHOW LESS", I need the display to revert back to showing only the initial 3 list items. ...

javascriptjqueryhtml

styles.css is generating an ERROR message, indicating that it is unable to read properties of null when trying to access the 'classList'

Hey there, I've been working on adding a background color change to my navbar when the scrollY exceeds 30px, and it's functioning properly. However, I'm encountering an error in the console which states that the new classList cannot be added ...

cssangularangularjstypescripttypeerror

The Android Webview is experiencing difficulties with loading CSS styles and displaying the blockquote font color effect

I am facing an issue with loading HTML content in CSS through Android WebView. Despite having the code executed, I don't see any observable changes in font color for the text inside blockquote tags Here is the HTML code: <html> <head> ...

androidhtmlcss

How can I insert PHP code within the style attribute of a div tag?

I tried implementing this code, but unfortunately it's not functioning properly. My goal is to take user-defined width and height inputs in PHP and use them to generate a shape. echo "<div style='width:<?php $sirina?>;height: <?php $v ...

phphtml

How to strategically break Bootstrap 5 button groups for different resolutions?

Is there a way to create a line break in a specific place within a button group on a certain screen size? I have a button group with 4 buttons in a row, and I would like to split it into two lines after the first button if there isn't enough space. ...

cssresponsive-designbootstrap-5

What is the process for modifying CSS in Laravel?

New to Laravel over here, currently working in Homestead. When I need to make changes to my CSS, I typically edit the app.scss file located in resources/assets/sass and then recompile the css with Mix using the command npm run dev. I'm not entirely ...

phpcsslaravellaravel-blade

What could be causing my border to not function properly?

When examining the page, I noticed that the borders overlap and thicken due to the detail section. I tried to eliminate all borders of the details class using CSS, but unfortunately, it didn't work as expected. The bottom border stubbornly remains in ...

htmlcssbootstrap-5

The functionality of the "enter" key is disabled in the textarea of Internet Explorer 8

Pressing enter in a textarea with the nowrap whitespace attribute set through CSS does not create a new line in IE8. Instead, just a simple whitespace appears. Other browsers like Opera, Chrome, and Firefox do not have this issue. Any solutions for this pr ...

htmlcssinternet-explorertextareaword-wrap

Changing the background color of radio buttons using Chrome and the power of WebGL<script>canvas</script>

When using the Three.js WebGL renderer, I noticed that radio buttons have white backgrounds, but this issue only seems to occur in Chrome. If you want to see the problem for yourself, check out this fiddle: http://jsfiddle.net/5pL8v/328/ Does anyone know ...

javascriptcssradio-buttonwebglthree.js

Java update query experiencing issues

This servlet is designed to add a new user entry into a database table. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String firstname = request.getParameter("firstname"); Str ...

javajqueryhtmlcssjsp

Preventing access to websites through a web application using JavaScript

I am in the process of creating a web application that enables users to create a list of websites they wish to block, preventing access from their browsers. My goal is to block websites on all browsers, but I have narrowed my focus to Chrome for now. I ha ...

javascriptjqueryhtmlgoogle-chrome-extensionweb-applications