CODEWITHSUNDEEP
htmlcss
Peter
Peter

Reputation: 793

Making divs equidistant from each other and container edges

I am looking to have a number of divs equidistant from each other. What I am looking to do is have the maximum number of divs that will fit side by side and for them to be the same distant apart. The distance apart should also be the distance from the container edge.

I have almost got what I want from the following code (with thanks to another post found on here) however as can be seen from http://domainingarticles.com/a/ if you resize the page the items on the edges remain the same distance from the sides.

<body>
    <div id="container">
        <div class='item'><a href='#'><img src='test.png' alt='1' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='2' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='3' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='4' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='5' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='6' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='7' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='8' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='9' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='10' height='150' width='150' /></a><br />test</div>
    </div>
</body>

The following is the CSS

#container {
    text-align: justify;
}
#container:after{
    content: '';
    width: 100%;
    display: inline-block;
}

.item {
    text-align: center;
    width: 200px;
    display: inline-block;
    box-sizing: border-box;
    padding:25px;
}

.item img {
    border-radius: 25px;
}

Can anyone suggest I could achieve what I am looking for. Please note the number of items would be unknown so can't manually specify the distances.

Any help would be much appreciated.

Upvotes: 2

Views: 288

Answers (2)

Stickers
Stickers

Reputation: 78716

Take a look of this flexbox layout see if it helps.

#container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.item {
    flex: 0 0 150px;
    margin: 25px;
}
<body>
    <div id="container">
        <div class='item'><a href='#'><img src='test.png' alt='1' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='2' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='3' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='4' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='5' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='6' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='7' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='8' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='9' height='150' width='150' /></a><br />test</div>
        <div class='item'><a href='#'><img src='test.png' alt='10' height='150' width='150' /></a><br />test</div>
    </div>
</body>

jsfiddle

Upvotes: 3

Josh Beam
Josh Beam

Reputation: 19792

You can use flexbox (this isn't supported by older browsers, but I think it's a good option):

CSS:

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

.item {
  flex: 1 0 200px;
}

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

Upvotes: 0

Related Questions