Automated margin spacing within divs - without the use of bootstrap

I have a question regarding CSS. Is it feasible to achieve this design without relying on padding for the "5 divs element"?

It is not possible to hardcode values in the style tag of each div because they will be used in a foreach loop, with the width remaining constant - 5 divs per row.

I am hesitant to use pseudo(::after a specific div) since I am uncertain about the total number of divs that will be present.

If I try using:

width: calc(100% / 5 - *number of padding* px)

and then include padding: *number of padding* px;

on the 5 divs, my outer divs do not align as expected (they are not in line).

Do you have any suggestions on how to accomplish this effectively [without a bootstrap framework]?

https://i.sstatic.net/LEwgM.png

Answer №1

To achieve the desired layout, it is recommended to utilize flexbox with the justify-content: space-between property.

If you wish to increase the spacing between the divs, consider reducing the width of the elements.

.parent {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.child {
  width: 19%;
  background-color: gray;
  height: 100px;
}

.container {
  border: 3px solid black;
  padding: 10px 0px 10px 0px;
}
<div class="container">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Answer №3

The initial step is to eliminate the padding of 100% and then divide by 5. If there are 4 padding on your element, the formula will be as follows:

 calc((100% - 4*padding)/5);

For instance:

.container {
  display: flex;
  height: 80px;
  justify-content:space-between;
  border:1px solid;
}

.container>div {
  width: calc((100% - 4*10px)/5);
  background: red;
  margin:10px 0;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

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

Organizing content on a webpage with specific pixel measurements

I have a div and am utilizing Bootstrap 5. I'd like to have the Description and Length elements on separate lines when the page width is <=1024px. <div class="col-3 col-md-4 col-lg-3"> <div class="card d- ...

Guide to transform HTML into JSON with PHP

If you need to convert JSON to HTML, the JsontoHtml library can help. Now you want to convert existing HTML to JSON, and the following script was found: <script> $(function(){ //HTML to JSON $('#btn-render-json').click(function() ...

Codekit encountered an issue with Libsass: Invalid CSS error detected

Hey there, I'm diving into the world of SASS and coding, so I'd appreciate constructive feedback as I'm self-taught. After compiling my html, css, and sass files using Codekit, I keep encountering this error: Libsass: Error: Invalid CSS af ...

Secure User Authentication using HTML and JavaScript Box

In the given code, I am attempting to implement a functionality where a message is displayed next to the select box if it does not have a value of male or female. This message should not be shown if one of these values is selected. However, this feature ...

Disabling transparency for divs and subsequently restoring it

Currently, I am in the process of developing a website dedicated to my hometown using Wordpress. To enhance the viewing experience for users, I adjusted the transparency of the main div so that they can fully appreciate the background image. While this mod ...

Creating a fresh line using text interpolation within Angular 4 and Ionic 3

I am facing an issue with my front-end code: <p>{{ news.content }}</p> The variable news.content is stored in the Firebase DB. Is there a way to insert a new line in this text interpolation without making any changes to the front-end code (H ...

The functionality of the button is currently not compatible with Internet Explorer

I have encountered an issue in my application involving a combination of <h:outputLink> and <p:commandButton> as shown below: <h:outputLink target="_blank" value="theURL"> <p:commandButton value="Click" type="button" /> </h: ...

selecting unique elements using classes is not possible with jquery

I am experimenting with using ajax on dynamically generated html elements from django. I have tried selecting the instances by class, but for some reason, it is not working as expected. Can anyone point out my mistake here? javascript $(document).ready(fu ...

Show two columns horizontally using JavaScript

Hey, I'm working on a project where I need to display data from an array in an HTML output table. However, I'm facing an issue with displaying the table on the same page after clicking the submit button. Using document.write redirects me to anoth ...

utilizing PHP and AJAX to showcase data in an HTML table

I'm new to AJAX and I want to display an HTML table that is generated from PHP when a generate button is clicked. Below is the code snippet in my HTML file: function showHint() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, C ...

Avoiding the text being emphasized when hovering over the navigation bar list

Whenever I hover over the text in the navigation bar, the space above the text is highlighted instead of the text itself. This issue could be related to my CSS code: ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: silver ...

How can I retrieve the current background color and revert it back after a .hover event?

I am trying to use the .hover function to change the background color of a menu. Each menu item has a different background color, so I want it to return to its original color when the user hovers off. In other words, I want the script to read the current b ...

Adjust the parent div's background color when a radio button is selected

Is it possible to dynamically change the background color of a div that contains a radio button when the button is checked? Here is an example of the HTML code: <div class="custom-container"> <input id=“example” type="radio" name="opt ...

What caused the submit button to suddenly change colors in such a peculiar manner?

In its natural state, the submit button appears in the default color, lacking any specific style when viewed in Chrome. Once the CSS rule input[type="submit"]{border-radius: 2px;} is applied, the button transforms, suddenly changing color and showing a sh ...

Manipulating classes within ng-class in AngularChanging classes in ng-class dynamically

Featuring multiple elements with an ng-class that behaves similarly to a ternary operator: ng-class="$ctrl.something ? 'fa-minus' : 'fa-plus'" To access these elements, we can compile all the ones with fa-minus and store them in a lis ...

Maintaining the selected radio button based on previous input with the use of jQuery or PHP

I am in the process of developing an online quiz system. I am fetching questions and options from getquestion.php through ajax on quiz.html. On this page, I've included next and previous buttons so that users can navigate through the quiz. However, I& ...

Dealing with Issues in Projectile Image Display: Solutions for Resolving the Error

I've been attempting to change my projectile from circles to images, but I'm encountering this error File "C:\Users\Habib\Desktop\PYTHONGGAME\py.py", line 353, in <module> bullets.append(projectile(round(player ...

The chosen filter will be displayed in the list of active filters

My website displays various products, and like many other similar sites, I am attempting to implement filters for the search results. One of the filters I have is for colors. I am showcasing color thumbnails, and when a user selects a color thumbnail, the ...

The functionality of the Bootstrap4 accordion is not functioning according to my expectations

My goal is to create a unique e-commerce checkout page design. Each panel would be opened sequentially, with the next panel unfreezing when the action button of the current panel is clicked. However, I seem to be making a mistake as it is not working as in ...

Determining the Number of Sub-Menu Items Using jQuery without Reliance on CSS Classes

I've scoured the depths of Google and SO in search of answers, but nothing quite fits the bill. My mission is to create a submenu without using classes, adding a style attribute to each individual <li> within the sub <ul> that sets a min- ...