Responsive widths

Question

I'm trying to get three divs to take up a third of the width each (33%) but when I resize the window they jump all over the place and don't line up correctly. What am I doing wrong?

HTML

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>

CSS

.step{
  width:33%;
  height:200px;
  display:inline-block;
}
.fa{
  color:darkgray;
  width:100%;
  margin-top:5%;
}
i{
  text-align:center;
}
.step p{
  padding:5%;
  text-align:center;
}

Answer 1

The problem is that the whitespace between the div elements also takes up space (because they are display:inline-block).

Solution 1: Remove the whitespace

Use html comments to remove the whitespace (also add vertical-align:top to keep them top aligned when they have different heights)

.step{
  width:33%;
  height:200px;
  display:inline-block;
  vertical-align:top;
}
.fa{
  color:darkgray;
  width:100%;
  margin-top:5%;
}
i{
  text-align:center;
}
.step p{
  padding:5%;
  text-align:center;
}

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div><!--
--><div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div><!--
--><div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>

---

Solution 2: Use float:left

.step{
  width:33%;
  height:200px;
  float:left;
}
.fa{
  color:darkgray;
  width:100%;
  margin-top:5%;
}
i{
  text-align:center;
}
.step p{
  padding:5%;
  text-align:center;
}

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>

---

Solution 3: use flexbox (most modern and more appropriate nowadays)

This needs a wrapper element.

.steps{display:flex}
.step {
  height: 200px;
  flex: 0 0 1;
}
.fa {
  color: darkgray;
  width: 100%;
  margin-top: 5%;
}
i {
  text-align: center;
}
.step p {
  padding: 5%;
  text-align: center;
}

<div class="steps">
  <div class="step">
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
    <p>Bookmark this page in your browser and check back on the first of each month</p>
  </div>
  <div class="step">
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
  </div>
  <div class="step">
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
    <p>Look out for links and prompts in our emails and newsletters</p>
  </div>
</div>

Answer 2

Wrap them in a parent div and set that div's font-size to 0, this will get rid of the line breaks which are breaking the steps on to separate rows. You could use float's as Santi suggests but I actually prefer working with inline-block personally, I find it more bulletproof, floats need to be cleared and can't be vertically aligned.

<div class="parent">
  <div class="step">
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
    <p>Bookmark this page in your browser and check back on the first of each month</p>
  </div>
  <div class="step">
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
  </div>
  <div class="step">
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
    <p>Look out for links and prompts in our emails and newsletters</p>
  </div>
</div>

CSS:

.parent{
  font-size: 0;
}

Answer 3

You need to use float:left; and remove display:inline-block; Replace your .step css with the following

.step{width:33%; height:200px; float:left;}

the float property is very very commonly used. Though in my opinion it's a little unintuitive for beginners.

Answer 4

This is a side-effect of using display: inline-block; instead of float.

When using inline-block, your browser will treat any line-breaks in your code as spaces, so what's actually rendering in your case is:

div   (space)   div   (space)   div

By removing the line-breaks in your code between your divs, you can resolve this. Or, you could use float: left; and a clearing element afterward.

Removing the line breaks: https://jsfiddle.net/qzdxtwhx/

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div><div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div><div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>

Using float: https://jsfiddle.net/qzdxtwhx/1/

<div class="step">
  <i class="fa fa-user-o fa-4x " aria-hidden="true"></i>
  <p>Bookmark this page in your browser and check back on the first of each month</p>
</div>
<div class="step">
  <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i>
  <p>Log in and select ‘My Account’ at any time to find a link to this page</p>
</div>
<div class="step">
  <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i>
  <p>Look out for links and prompts in our emails and newsletters</p>
</div>
<div class="clear"></div>

.step{
  width:33%;
  height:200px;
  float: left; /*Replace display: inline-block; */
}

.clear {  /*Add a 'clear' element to preserve natural layout*/
  clear: both;
}