How to make equal space between boxes in one row via CSS


Tags: css

Problem :

I have a requirement that there are 4 boxes in one row.

  1. the boxes have fixed width and height
  2. but the width of the row will change by screen size.
  3. the first box should be aligned to the left border of the row
  4. last box aligned to right border.
  5. Also the space between any two boxes should be equal.

Is there a pure CSS way to make that happen? Here is the jsfiddle code.

HTML:

<div class="row">
    <div class ="col">
        <div class="box"></div>
    </div>
    <div class ="col">
        <div class="box"></div>
    </div>
    <div class ="col">
        <div class="box"></div>
    </div>
    <div class ="col">
        <div class="box"></div>
    </div>
</div>

CSS:

.row {
    display: table;
    border: 1px solid green;
    width: 400px; /* it changes by screen size actually */
    padding: 5px;
}
.row:before, .row:after {
    content: "";
}
.row:after {
    clear: both;
}
.col {
    float: left;
    width: 25%;
}
.box {
    border: 1px solid #DDD;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}
.col:first-child .box {
    margin-left: 0;
}
.col:last-child .box {
    margin-right: 0;
}


Solution :

Use text-align:justify on the container, this way it will work no matter how many elements you have in your div (you don't have to work out % widths for each list item

Updated CSS

.row {
    text-align: justify;
    min-width: 412px;
    border: 1px solid green;
    width: 80%; /* it changes by screen size actually */
    height: 90px;
    padding: 5px;
}

.row:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.col {
    display: inline-block;
}
.box {
    border: 1px solid #DDD;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

FIDDLE


    CSS Howto..

    How to change the current link color in navigation bar

    how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]

    How can I give each
  • its own bullet image?
  • How to specify the position of sub-menu div and prevent the menu div changed

    How do I get the slide in as you scroll down (CSS Trick) technique to work in Safari?

    Modal box doesn't show completely

    CSS: how to make label appear right of the radio?

    How can I make kinetic.js full screen background view

    How to copy this semi-static menu?

    Css Drop down menu, how to keep menu infront of content

    How can I remove a bootstrap buttons hover effect?

    How To Make CSS Animations Ease Back To Position When No Longer Hovering?

    How to override CSS3 animation with jQuery?

    How can I see “:hover” and “:active” properties of elements on a webpage? [duplicate]

    how can I align text/image/links within a grid
    of the twitter bootstrap css?

    how to set up responsive columns with pure CSS?

    Newbie: How to have a row background in my case?

    How to fix the alignment of my sub-menu

    How to put a space between the hover effect in this situation css html php?

    How to avoid double border from the multiple
  • How can we avoid the shake when we hover over an element and set its border?

    Hide a partially shown div

    How to write this 'OR' CSS selector?

    How to truncate paragragh lines in css [duplicate]

    How to center vertically and horizontally a heading text using flask-bootstrap

    How can I use external HTML form in Joomla site?

    How to shorten this placeholder-transitioning CSS selector using sass/compass?

    how to give css only the 1st label span?

    How to use both fixed and stretchy CSS content

    How to override margin and right/left in css?