3

I have four elements within a div and want to space them out evenly in the available space. What technique is considered best practice for responsive design in this case?

For each element, I am using: 

height: 75px;
width: 75px;
border-radius: 50%;
margin-right: 20px;

JS Fiddle: http://jsfiddle.net/adnanymous/9yYZJ/

Adnan Khan
  • 655
  • 2
  • 8
  • 20

2 Answers2

7

Since you're already using bootstrap, just insert a div.row-fluid inside that div that should contain the four items. Wrap each of those four items in a div.span3. That will auto scale the spacing until you get down before 767px wide (bootstrap's phone size), at which point everything will stack vertically. This avoids adding extra libraries and needs will work even without javascript enabled.

<div class="row-fluid">
  <div class="span3">Thing1</div>
  <div class="span3">Thing2</div>
  <div class="span3">Thing3</div>
  <div class="span3">Thing4</div>
</div>
nickrak
  • 1,635
  • 15
  • 18
  • 1
    Thankyou! I am using Bootstrap 3 though, and found in their documentation the use of sx, sm, lg prefixes for this. Your solution is however fine for Bootstrap 2, and accepted. – Adnan Khan Aug 17 '13 at 12:52
1

Flexboxes (http://dev.w3.org/csswg/css-flexbox/) do exactly what you want, if you can live with the current state of browser support (http://caniuse.com/flexbox) and the need to use vendor prefixes. In your case, something like this:

#my-div {
    display: -webkit-flex;        
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: flex-between; /* flush against edges */
    -webkit-justify-content: flex-around;  /* space at left/right */
}

.elt {
    -webkit-flex: none; /* do not grow and shrink items */
    height: 75px;
    width: 75px;
    border-radius: 50%;
    margin-right: 20px;
}

These are responsive by nature. Certainly better than some flaky jQuery plugin.