Question

So i got a Div that its width is set on 100% width so that means it can be every size. how ever that div has the value ” min-width:950px ” so its width size cant go under 950.

inside that div i have 2 lines , every line contain 4 div – with specific value of width

now whats happen is when someone with low resolution enter my site he can see the 4 divs getting together just fine :

but when someone with hugh resolution enter my site its like this:

what im looking to do is when someone with high resolution enter my site the 4 divs will take same spaces from each other , so it will be look like that:

how can i do that? thanks in advance!

Answer 1

CSS Styling

#container {
  text-align: justify;
  min-width: 950px;
  border: solid 1px Black; // Change this
}

#container div {
  width: 100px; //Change this
  display: inline-block;
  background: red; // Change this
}

#container:after {
  width: 100%;
  display: inline-block;
}

HTML Elements

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Codepen (Sandbox): http://codepen.io/anon/pen/HdtiC

Original Article: http://css-tricks.com/equidistant-objects-with-css/