Even Responsive Inline Divs

Phew what a long time ago I posted.. Time to get back into it with a little responsiveness.

So you want to align divs next to each other evenly and have it responsive.. no problem!

The problem is by using 4 divs next to each other with text in, you have to apply the styling to only the inline divs and that can cause some headaches.. not going into it. The solution.

The HTML:

<div class="container">
   <div class="innerbox">
      <div class="innertext">
          Enter box content here
      </div>
   </div><div class="innerbox">
      <div class="innertext">
          Enter box content here
      </div>
   </div><div class="innerbox">
      <div class="innertext">
          Enter box content here
      </div>
   </div><div class="innerbox">
      <div class="innertext">
          Enter box content here
      </div>
   </div><div class="innerbox">
      <div class="innertext">
          Enter box content here
      </div>
   </div>
</div>

Next is the CSS:

.container { 
  width:100%; 
}
.container .innerbox { 
  width:25%; 
  display: inline-block;
}

.container .innerbox .innertext { 
  padding:5px; 
  background:#3399cc; 
  margin:5px;
  text-align:center;
}

What I do here is give the container div a size of 100%. The divs inside ( innerbox ) we give a default size I used 25% for four blocks, this works best with sizes that go into 100 ( ex. 10%, 20%, 25%, 33.3% and 50% ). Make the display property “inline-block” so it fits next to each other. NO margin or padding gets applied to these as they will sit snuggly next to each other.

Next we applied Background color, Padding and Margin to the innertext div.

And then to make it responsive we use media queries to tell CSS to use different width’s for the inner box on different screens. You can make more variations of these ones if you feel like it these two are for iphone and ipad.

/* iPad Screen Size */
@media screen and (max-width: 1024px) {
    .container .innerbox {
        width:50%
    }
}

/* iPhone Screen Size */
@media screen and (max-width: 640px) {
    .container .innerbox {
        width:100%
    }
}

Thats it.. Easy and Straight forward. If you have improvements on this please leave a comment.

Here is a link to the codepen example.

Janes Oosthuizen

Author Janes Oosthuizen

Programmer and Tech Junky from Bloemfontein, South-Africa. I have been programming for 8 years in various languages including ( CSS, HTML, jQuery, PHP, MySQL, Wordpress and many other ).

More posts by Janes Oosthuizen

Leave a Reply