CODEWITHSUNDEEP
htmlcss
Tom Maxwell
Tom Maxwell

Reputation: 9573

Equally space divs within a parent div?

Should be simple enough. I have a div with a width of 1100px which contains divs of width 300px. I need to space them out equally and clear to the next line below once no more can fit within the 1100px width. Best way to do this? I've never needed to do it.

Upvotes: 1

Views: 47

Answers (1)

jmore009
jmore009

Reputation: 12933

I think this is what you're looking for. You can use nth-of-type to add margin to the middle boxes

.background{
  background: black;
  width: 1100px;
  margin: auto
  overflow: hidden;
}

.box{
  width: 300px;
  height: 300px;
  float: left;
  margin: 0 0 20px
}

.box:nth-of-type(3n+2){
  margin: 0 100px 20px;
}

FIDDLE

Upvotes: 2

Related Questions