Divide the space evenly with minimal gaps

I've been trying to use examples from the web, but I just can't seem to get it right. Who better to ask than you guys?

I want to evenly distribute id="klip". I have set their widths to 18% so that each space is 2%.

Here's how it looks now: https://jsfiddle.net/d8L1Lax4/

My HTML:

<div class="boks">
   <span id="klip">2 KLIP</span>
   <span id="klip">8 KLIP</span>
   <span id="klip">16 KLIP</span>
   <span id="klip">32 KLIP</span>
   <span id="klip">48 KLIP</span>
</div>

My CSS:

.boks > #klip, #pris {
   display: inline-block;
   *display: inline; /* For IE7 */
   zoom: 1; /* Trigger hasLayout */
   width: 18%;
   text-align: center;
   background-color: #da85a3;
   padding-top: 20px;
   padding-bottom: 20px;
   font-family: 'Poppins', sans-serif !important;
   font-size: 17px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
htmlcss

Answer №1

If you're looking to improve your layout, I highly recommend incorporating flexbox design. Remember, it's essential for the id attribute to be unique within a webpage, so I've updated it to use a class instead.

.container {
  display: flex;
  justify-content: space-between; /*or space-around*/
  background-color: aqua;
}
.item {
  width: 18%;
  padding: 20px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif !important;
  font-size: 17px;
  text-align: center;
  background-color: #da85a3;
}
<div class="boks">
  <span class="klip">2 KLIP</span>
  <span class="klip">8 KLIP</span>
  <span class="klip">16 KLIP</span>
  <span class="klip">32 KLIP</span>
  <span class="klip">48 KLIP</span>
</div>

Answer №2

Instead of relying solely on flexbox, you might want to explore the option of using a grid system. This approach can be beneficial in various scenarios, including the one you're currently inquiring about. While Bootstrap offers a user-friendly grid layout, there are also more lightweight options like Pure.css.

For instance, if you opt for Pure.css, your code could resemble the following:

.klip > div {
  background-color: #ddd;
  text-align: center;
  margin: 0 5px 0;
  padding: 20px 0;
}
/* To eliminate leading or trailing margins: */
.klip:first-child > div {
  margin-left: 0;
}
.klip:last-child > div {
  margin-right: 0;
}

<div class="pure-g boks">
  <div class="pure-u-1-5 klip">
    <div>2 Klip</div>
  </div>
  <div class="pure-u-1-5 klip">
    <div>8 KLIP</div>
  </div>
  <div class="pure-u-1-5 klip">
    <div>16 KLIP</div>
  </div>
  <div class="pure-u-1-5 klip">
    <div>32 KLIP</div>
  </div>
  <div class="pure-u-1-5 klip">
    <div>48 KLIP</div>
  </div>
</div>

You can see how it appears by visiting this link.

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

Encountering Problem Importing HTML Table Data into R

I am looking to import the data table located at the bottom of a specific webpage into R, either as a dataframe or table. The webpage in question is . Initially, I attempted to utilize the readHTMLTable function from the XML package: library(XML) url <- ...

htmlrxmlweb-scraping

Solving the issue of localizing the Datetime picker

My date input seems to be saving incorrectly in the database. When I enter a date like 18/02/2020, it gets saved as 17/02/2020 22:00:00. Is this a time zone issue? How can I fix this problem and thank you. Also, if I want to save the date with UTC, how do ...

htmlangulardatedatepicker

Steps to showcase specific data in the bootstrap multi-select dropdown menu sourced from the database

Utilizing CodeIgniter, I have set up multiple select dropdowns using bootstrap. The issue I am facing is with displaying the selected values in these drop-downs on the edit page. Would appreciate some guidance on how to tackle this problem. Here is a sni ...

phphtmltwitter-bootstrapcodeigniter-3

Incorporating RFID reader functionality into a website

I am currently facing an issue with integrating an RFID card reader into a web page. After some research, it seems that the solution involves creating an ActiveX component and using JavaScript. My question is, how can we go about building an ActiveX compo ...

javascriptactivexhtmlsmartcardrfid

How to Retrieve Content from an iFrame Using jQuery?

I am facing a challenge with an HTML form that is directed to an IFRAME upon clicking "submit". The iframe then loads a page after the submission, which indicates whether the user-input data is valid or not. It simply displays on screen as "TRUE" or "FALSE ...

javascriptjqueryhtml

I believe the term for this is an inline text alignment: center, but for some reason, I am unable to make it function properly within

Can anyone help me align the "Sizes" section in the center? I've tried everything but can't seem to get it right. Any tips on what and where to insert in the code? Thanks! <form action="https://www.paypal.com/cgi-bin/webscr" method="post" ta ...

html

Sending data to another page by selecting a list item

Being new to web programming and JavaScript, I am facing a scenario where I have a list of requests displayed on one page and I need to pass the ID of the selected request to another page to display all the details of that particular request. I am strugg ...

javascriptphpjqueryhtml

Adjustable pseudo-elements derived from the size of the element

I have a unique feature in my web application that involves a span element with inner text and additional :before and :after pseudo-elements used as decorative lines on each side of the text. Check out this JSFiddle example to see exactly what I mean. .c ...

jqueryhtmlcsscss-selectorspseudo-element

Ensure that a span within a cell table has a height of 100%

Is there a way to have the span element expand to full height? Click here <table class="table table-condensed table-hover table-striped"> <thead> <tr> <th class="shrink"></th> <th class ...

csstwitter-bootstrap

Using HTML and CSS to generate an alpha mask on top of an image

I am currently working on a website and I am looking to create an effect where an image is masked by an overlay. The goal is to achieve a "fade out" effect, without any actual animation, but rather make it appear as if the image is gradually fading into th ...

javascripthtmlcssfademasking

Themes in Next.js with a splash of color

Is there a way to implement theming with color picking for elements? Check out the example here. I've explored using CSS variables and changing the document classname, but I'm uncertain if this is the best approach. @tailwind base; @tailwind com ...

cssreactjsnext.jsthemescss-variables

Is the XPath in Selenium executed against the Document Object Model (DOM) or the HTML file

Currently, I am in the process of developing a library for analyzing webpages. My approach involves using Selenium to access elements on a webpage through xpath. I have been contemplating replacing Selenium with an offline xpath tool. However, upon furthe ...

javascripthtmldomseleniumxpath

Can Antd's Typography.Paragraph be used as a multi-row Menu title?

I am having trouble getting multiple rows to work inside the Antd Submenu. When I select only one row, it works fine. However, when I try to select multiple rows, the ellipsis is not shown at all and the text remains in one row. <SubMenu ...

cssreactjsantd

What is the method for shifting content as the window is resized to ensure it remains in its original position?

My page features a grid with three div elements. Each div is the size of the viewport, resulting in only one div being visible at a time, while the other two remain outside the view. This makes the grid three times larger than the viewport. When resizing ...

javascriptjqueryhtmlcss

Is there an equivalent of getElementById for placeholder text?

I need help automating the input of information on a webpage using JavaScript. Each field has a unique ID, like this: <div id="cc-container" class="field has-float-label"> <input placeholder="ccnumber" id="credit_card_number" maxlength="16" ...

javascripthtml

Safari experiences a decrease in speed when multiple checkbox elements are present

While using Safari, I have encountered a problem. The performance of interacting with a text input is significantly affected when there are numerous type="checkbox" elements on the page. This issue appears to be more pronounced in Safari compared to Chrom ...

htmlperformancedomsafari

HTML5 Advanced API Integration with Vimeo

After setting up my Vimeo account and app for video upload, I received approval. However, when I attempted to upload a video to the Vimeo server, I encountered difficulties. I am struggling to understand how OAuth functions. Please see below for the co ...

jqueryajaxhtmlapivimeo

Why isn't my AJAX POST request to PHP functioning correctly?

It was all working perfectly fine earlier, but now something seems off and I must have made a mistake somewhere. I'm in the process of setting up a form where the information entered is sent via AJAX to my PHP file, which then outputs the username an ...

javascriptphpjqueryhtmlajax

Tailwind - make sure the dropdown list is always on top of all other elements

Having an issue configuring the position of a dropdown list. The objective is to ensure it stays on top of all elements, however, when inside a relative positioned element, it ends up being obscured by it. Here's an example code snippet to illustrate ...

htmlcssfrontendpositiontailwind-css

After modifying the select option, the input field remains disabled

I successfully developed a self-contained code snippet that toggles the enable/disable state of input fields. It works flawlessly on my HTML page. Check it out below: Identification Type: <select name="Identification-Type" id="Identification-Type"& ...

javascriptjqueryhtml