CODEWITHSUNDEEP
htmlcss
V. Sambor
V. Sambor

Reputation: 13389

Inline block increase spacing between elements and keep the alignment

I have a problem to increase the space between elements within an inline block container. I found a trick to do that but it works only for the first line... By the way, I have n number of elements and a specific container width.

The code:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container {
                background-color: blue;
                height: 300px;
                width: 620px;
                display: inline-block;
            }

            .container div + div {
                margin-left: 33px;
            }

            .child1 {
                width:200px;
                height: 100px;
                display:inline-block;
                background-color: red;
            }

            .child2 {
                width: 200px;
                height: 100px;
                display: inline-block;
                background-color: green;
            }

            .child3 {
                width: 200px;
                height: 100px;
                display: inline-block;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="child1"></div>
            <div class="child2"></div>
            <div class="child3"></div>
        </div>
    </body>
</html>

The Result: enter image description here

(Note: It has to support all browsers, +IE7)

Thank you very much!

Upvotes: 1

Views: 261

Answers (4)

TheYaXxE
TheYaXxE

Reputation: 4294

To do this you can use something fantastic called Flexbox.

First, set the container to display: flex. Then use flex-wrap: wrap so if you add more elements, they will appear on a new row below. Also make sure to use align-content: flex-start so the elements will start from the left. Finally add a margin-left and margin-bottom to all your child-divs so they will have space between them. Because we are use Flexbox, your problem with the margin will now be eliminated.

If you want the divs to fit perfectly in the container instead, just remove the margins of the child-divs and set the parent to justify-content: space-between.

CSS Code:

.container {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
   width: 620px;
   height: 300px;
   background-color: blue;
}

.container div {
   margin-right: 33px;
   margin-bottom: 5px;
}
.child1 {
   width: 200px;
   height: 100px;
   display:inline-block;
   background-color: red;
}

.child2 {
   width: 200px;
   height: 100px;
   display: inline-block;
   background-color: green;
}

.child3 {
   width: 200px;
   height: 100px;
   display: inline-block;
   background-color: yellow;
}

Working Fiddle

Read more about Flexbox

An alternate solution if you don't want to use Flexbox, you could just select every third children and then set the margin-left to 0:

.container div:nth-child(3n) {
   margin-left: 0;
}

Hope that helped

Upvotes: 0

Simone Cavalli
Simone Cavalli

Reputation: 1

Did you try this ?

div+div:last-of-type{
            margin:0px;
        }

Insert this snippet in the style part and it should be ok. It will work for the last div only .

Upvotes: 0

John Bupit
John Bupit

Reputation: 10618

Use margin-right instead of margin-left.

.container div {
  margin-right: 33px;
}


.container {
  background-color: blue;
  height: 300px;
  width: 620px;
  display: inline-block;
}
.container div {
  margin-right: 33px;
}
.child1 {
  width: 200px;
  height: 100px;
  display: inline-block;
  background-color: red;
}
.child2 {
  width: 200px;
  height: 100px;
  display: inline-block;
  background-color: green;
}
.child3 {
  width: 200px;
  height: 100px;
  display: inline-block;
  background-color: yellow;
}
<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>

Upvotes: 0

Mattia Nocerino
Mattia Nocerino

Reputation: 1513

Use the nth-child selector to select every three child!

https://jsfiddle.net/25x4ga0g/1/

.container div:nth-child(2n + 1) {
  margin-left: 0px;
}

More about nth-child selector

Upvotes: 2

Related Questions