How about having one row with five divs of equal width, each with a margin-right of 20px?

Is there a way to achieve 5 floating divs on one row with a 20px margin-right between each, except for the last-child?

This is the desired structure:

<div class="f-item pull-left">1</div>
<div class="f-item pull-left">2</div>
<div class="f-item pull-left">3</div>
<div class="f-item pull-left">4</div>
<div class="f-item pull-left">5</div>

I attempted the following CSS code, but it didn't work as expected (the "reset" on last-child seemed to be ignored):


.f-item {
    margin-right: 20px;
    width: 20%;

    &:last-child {
        margin-right: 0;
    }
}

You can view an example in this Fiddle.

.f-group {
  width: 100%;
}

.f-item {
  margin-right: 20px;
  width: 20%;
  background-color: green;
  text-align: center;
  color: white;
}

.f-item:last-child {
  margin-right: 0;
}

.col-sm-12 {
  background-color: red;
  padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" rel="stylesheet"/>
<div class="col-sm-12">
  <div class="f-group">
    <div class="f-item pull-left">
      1
    </div>
    <div class="f-item pull-left">
      2
    </div>
    <div class="f-item pull-left">
      3
    </div>
    <div class="f-item pull-left">
      4
    </div>
    <div class="f-item pull-left">
      5
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="col-sm-12">

htmlcsstwitter-bootstrap-3

Answer №1

To accommodate the margin width, make adjustments to the item width...

.f-item {
    width: calc(20% - 16px);
    margin-right: 20px;
    background-color: green;
    text-align: center;
    color: white;

    &:last-child {
        margin-right: 0;
    }
}

https://jsfiddle.net/7e1pdttt/1/

For CSS only:

.f-item {
    width: calc(20% - 16px);
    margin-right: 20px;
    background-color: green;
    text-align: center;
    color: white;
}
.f-item:last-child {
    margin-right: 0;
 }

http://www.bootply.com/jxKTTBZsSi

Answer №2

Take a look at the power of flexbox:

.f-items {
  display: flex;
  justify-content: space-between;
}

.f-item {
  margin-right: 20px;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  background: #eee;
}

.f-item:last-child {
  margin-right: 0;
}
<div class="f-items">
  <div class="f-item pull-left">1</div>
  <div class="f-item pull-left">2</div>
  <div class="f-item pull-left">3</div>
  <div class="f-item pull-left">4</div>
  <div class="f-item pull-left">5</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

The conditional rendering logic in the ng-if directive does not seem to be synchronizing

Currently, I am delving into AngularJS and working on a basic application to gain familiarity with it. Within my app, there are four tabs: List, Create, Update, and Delete. However, my goal is to only display the Update and Delete tabs when I press the b ...

javascripthtmlangularjs

JavaScript - Retrieving the variable's name

Whenever I invoke a function in JavaScript with a variable, like this: CheckFunction(MyVariable); CheckFucntion(MyVariable2); Suppose I have a function that checks if the input is a number: function CheckFunction(SOURCE){ //THE CODE ITSELF }; I want to ...

javascripthtmlvariables

What's the best way to display two checkboxes on a single line?

I am working with checkbox filters in WooCommerce and I want to organize them so that two checkboxes appear in one row, followed by the next two in the second row, and so on. The issue can be seen at this URL. I also want this style to apply to "Product Co ...

csscheckboxwoocommercehook

Dynamic CSS containers that adjust according to browser and screen dimensions

01) In my attempt to create a row with two content boxes, I encountered an issue. The first box is supposed to display an image and the second box text. However, I am struggling to make it responsive and interactive based on different browser and screen si ...

htmlcsssizeinteractive

What is the best method for transmitting server errors to the client?

When using passport.js, I have all the required code in place. However, I am facing an issue with displaying errors on the client-side. Despite having the successRedirect set up correctly, nothing happens when a wrong password is entered, and no error mess ...

javascripthtmlnode.jsexpresspassport.js

Inserting line breaks in the data retrieved through AJAX

Utilizing ajax to transfer data from a sophisticated custom field wysiwyg editor. Within the markup provided, I am specifically addressing the div with the 'bio' class. However, upon receiving the data, it is consolidated into one large paragraph ...

javascriptphphtmljqueryajax

Tips for Resizing and Reviving Divs with jQuery

I have recently ventured into the world of web development to assist a family member with their website. My knowledge and experience are limited, but I am facing an interesting challenge. I am trying to manipulate certain divs as users scroll down the page ...

javascriptjqueryhtmlcss

Issue in Opera with the $(window).load(function(){}); script

In order to display the body's main div height correctly after all content (images) have loaded, I utilized a combination of jQuery and CSS. //The CSS used is as follows body {display: none;} /* Function to calculate div block height */ function re ...

jqueryhtmlcssopera

Ribbon design in LESS/CSS does not maintain its structure when resized in Google

My CSS/LESS ribbon is displaying perfectly in Firefox, but encountering issues in Chrome when resizing the window. At 100% zoom, everything looks good, but adjusting the zoom causes elements to become misaligned. To make it easier to troubleshoot, I' ...

cssgoogle-chromezoominglessribbon

Invoking partial view via Ajax

I am using Ajax to call a partial view, but it is returning as undefined. This is my controller code: [HttpGet] public ActionResult CallPartial() { if (Request.IsAjaxRequest()) { return PartialView("~/Views/Partial1"); ...

jqueryhtmlajaxmodel-view-controllerpartial-views

What causes the modal to appear and then vanish suddenly?

I've created a simple modal code with minimal JS involved. When the button is clicked, the modal appears briefly, then the page refreshes and the modal disappears. I'm not sure what could be causing this issue. Any help would be appreciated! h ...

javascriptcssbootstrap-4modal-dialog

What is the best way to add padding to both the TextField input and label components within Material UI?

Recently, I've integrated Material UI into my project and set up a TextField for a form field. However, I'm facing an issue where applying padding to the input field doesn't affect the label as well. <TextField sx={{ display: &q ...

cssreactjsnext.jsmaterial-uimaterial-design

Guide on aligning a series of divs in a single row within a parent div

Within the confines of a 400px wide div called "container", there are six left-floated "box" divs, each 100px wide. The combined width of the "box" divs exceeds 400px, resulting in the divs wrapping onto two lines, with 4 on the first and 2 on the second ...

css

Firefox is not allowing the form to be submitted at this time

My form is functioning correctly on Chrome and Safari, but not on Firefox. Solution Attempt #1 <form id="subscribe-form" class="footer-sign-up" action="/subscribe" method="POST"> <input type="text&q ...

htmlajaxformslaravelfirefox

What is the best way to dynamically insert columns into HTML code?

This is an example of my HTML code: <div class="row text-center"> <div class="col h4">We Collaborate With:</div> <div class="col">company1</div> <div class="col">company2</div> ...

javascriptjqueryhtmlajax

JavaScript Tutorial: Extracting the text content of a drop event

Curious about extracting the text value from a drop event, I set out to find an answer. To my surprise, I discovered that it's not as straightforward as I thought. Check out the demo below: <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

javascriptjqueryhtmlajax

Issue with TinyMCE Editor: Inoperative

<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", theme: "modern", plugins: [ "advlist autolink li ...

javascripthtmlcsstinymce

Dynamic text displayed on an image with hover effect using JavaScript

Currently, I am in the process of developing a website for a coding course that is part of my university curriculum. The project specifications require the use of JavaScript, so I have incorporated it to display text over images when they are hovered over ...

javascripthtmlcsshover

Styling images side by side with CSS in Internet Explorer

I've encountered a CSS dilemma. I have a collection of images that I want to present side by side using an unordered list within a fixed width container. The goal is to have 3 images per row before moving on to the next set of 3 images. Each list ite ...

cssinternet-explorer-7

Create SCSS to style multiple CSS classes

Are there more efficient ways to create css helper classes like the ones shown below? Can I use scss to generate cleaner and better classes? Thank you. .m-1 { margin: 1px !important; } .m-2 { margin: 2px !important } .m-3 { margin: 3px !important } .m-4 ...

csssass