CODEWITHSUNDEEP
htmlcss
user3589055
user3589055

Reputation: 23

Equal spacing of 3 divs inside of container

The container is 1200px, each div is only 292px wide. Ideally div 1 would sit on the left margin, div 3 would sit on the right margin and div 2 would sit right in the middle of them. To further complicate things, when viewed on mobile the container will be reduced to 320px and all 3 divs should be in line with each other vertically, underneath each other. At the moment the css to each div looks like this:

.test1 {
float:left;
width:292px;
background-color:#F2F2F2;
margin:0 4px 5px;
border:1px solid grey;
line-height:0;
}

Upvotes: 1

Views: 2473

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106008

What you want can be achieved different ways depending on your html structure.

with float: 

  <tag left   :floatleft  />
  <tag right  :float:right/>
  <tag center :margin:auto/>

with display:flex;

<parent 
       style="display:flex;justify-content:space-between;">
  <child left   />
  <child center />
  <child right  />
</parent>

with @media queries you can swap row layout into column layout when width is not enough to hold the 3 of them : DEMO 

section {
  display:flex;
  justify-content:space-between;
}
article {
  width:292px;
  background:green;
}
@media all and (max-width:900px) {
  section {
    flex-direction:column ;
  }
  article {width:100%;
  }
}

<section>
  <article> 292px width</article>
  <article> 292px width</article>
  <article> 292px width</article>
</section>

with display:inline-block:

<parent 
       style="text-align:center">
  <child left    style="display:inline-block"/>
  <child center  style="display:inline-block"/>
  <child right   style="display:inline-block"/>
  <pseudo-tag    style="display:inline-block;width:100%"/><!--this can be either a pseudo element or a neutral tag in HTML to enhance compatibility for IEs<8 -->
</parent>

Here a code pen to easily set and resize 3 boxes 292px width : http://codepen.io/gc-nomade/pen/nrbDl

Upvotes: 1

Danield
Danield

Reputation: 125581

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

FIDDLE

<div class="container">
    <div class="test1"></div>
    <div class="test1"></div>
    <div class="test1"></div>
</div>

CSS

.container {
    width: 1200px;
    text-align: justify;
}
.container:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.container .test1{
    display: inline-block;
    width:292px;
    background-color:#F2F2F2;
    margin:0 4px 5px;
    border:1px solid grey;
}

Upvotes: 2

Tom Oakley
Tom Oakley

Reputation: 6403

Is something like this what you're looking for?

.container {
    width: 1200px;
}
.test1 {
    float:left;
    width: 24.333333333%;
    height: 200px;
    background-color:#F2F2F2;
    margin-left:13.3%;
    border:1px solid grey;
    line-height:0;
}

.test1:first-child {
    margin-left: 0;
}

jsfiddle

Upvotes: 0

Related Questions