Responsive widths - html

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

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 2

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 3

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;
}

Answer 4

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;
}