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 make the margins and border in a mobile website invisible html/css

    How can I make a div *not* expand to fill it's parent?

    How to display image in sidebar-wrapper css class

    CSS: Checkbox with Border. How to get Space between Border and Content?

    custom radio button show value inside

    How to slide these divs continuously in loop

    How to add different CSS3 hover transitions on hover out with CSS

    How can I use CSS to set as my
  • background if I'm using the Zend framework?
  • How to not lose the css while appending html to an element?

    How to remove
     tag

    How to build a CSS style with a LESS mixin parameter?

    How can I make an svg scale with its parent container?

    Bootstrap and CSS: how to make a text area (div) behave like a responsive image

    Yahoo news CSS, how to achieve behavior

    How to create mirrored image effect with CSS single element

    How can I make my an image?

    How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

    How to center a text nav bar with CSS

    How to make a GWT-like CaptionPanel manually

    How to add checkmarks and x's when validating in angularjs?

    CSS how to make an element fade in and then fade out?

    How Visually Long is a String?

    How to style using nth-of-type within a ul tag?

    How to have a css element with transitions except initially?

    how to create a css attribute swapper between two elements?

    How to add multiple CSS elements to a div using jQuery?

    How do I control a css child property with javascript?

    How to load CSS into CodeIgniter

    How to add a ToolTip for an icon inside my CSS file

    How to correctly use tableless layout with borders using CSS?