Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

dynamic spaces between divs

dynamic spaces between divs

Problem

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!

Problem courtesy of: m o r

Solution

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

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

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

Solution courtesy of: rrowland

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

dynamic spaces between divs

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×