Why Inline-block is not doing what I am expecting? - html

Question

Roughly a week ago all my divs were properly aligned on the same line.
I'm not sure what I did to cause them to stack. "fbox" is set to inline-block but its acting as a block.
I really didn't want to ask a question about it, but I am losing time by getting frustrated about this.
<div class="fbox" id="breast">
<span class="title">Breast Procedures</span>
<ul>
<li>Breast Augmentation</li>
<li>Breast Lift</li>
<li>Breast Reduction</li>
<li>Gynecomastia Surgery</li>
<li>Breast Implant</li>
<li>Nipple Surgery</li>
<li>Breast Asymmetry</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="fbox" id="facial">
<span class="title">Facial Procedures</span>
<ul>
<li>Brow Lift</li>
<li>Face Lift</li>
<li>Eyelid Lift</li>
<li>Nose Surgery</li>
<li>Facial Implant</li>
<li>Neck Lift</li>
<li>Earlobe Repair</li>
<li>Ear Reshaping</li>
<li>Chin Implant</li>
<li>Chin Augmentation</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="padding">
<div class="fbox" id="body">
<span class="title">Body Procedures</span>
<ul>
<li>Tummy Tuck</li>
<li>Liposuction</li>
<li>Mommy Makeover</li>
<li>Butt Lift</li>
<li>Body Contouring</li>
<li>Labiaplasty</li>
<li>Brachioplasty</li>
<li>Thigh Lift</li>
<li>Upper Body Lift</li>
</ul>
<span class="read">View Descriptions</span>
</div>
</div>
<div class="fbox" id="surgery">
<span class="title">Non-Surgical Procedures</span>
<ul>
<li>Fat Injection</li>
<li>Latisse</li>
<li>Botox</li>
<li>Dermabrasion</li>
<li>Chemical Peels</li>
</ul>
<span class="read">View Descriptions</span>
</div>
CSS: (Main code at bottom. .fbox, .read, .title)
.controls{
display:none;
}
.col span_6 {
text-color:black;
color:black;
}
.subheader{
text-color:black;
color:black;
}
.callbox{
background-color:white;
border-style:solid;
border-width:1px;
border-color:black;
display:block;
text-align:center;
height:75px;
width:1116.95px;
line-height:75px;
font-size:22px;
font-weight:bold;
}
.toggle h3 a{
color:black;
}
body .toggle > div {
padding: 10px 14px;
border-top: 0px;
border:1px solid #D2691E;
display: none;
background-color: #fff!important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/** .receptionist{
border:1px solid #D2691E;
display:block;
padding:5px;
border-radius:5px;
}
**/
.menu-item{
font-weight:600;
}
.hr{
display: block;
height: 1px;
border: 1px solid #8CAAD2;
margin: 1em 0;
padding: 0;
}
.settingsFront{
height:10px;
}
.settingsMessage{
height:150px;
}
.settingsMessageMain{
height:200px;
}
/** Start here ! **/
.title{
font-size:16px;
margin:0 auto;
text-align:center;
font-weight:600;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color:white;
background:white;
font-family:Futura;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-o-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
}
.main-content ul li{
list-style-type:none;
}
.main-content ul{
margin:0 auto;
}
.fbox{
width: 250px;
height: 300px;
background: rgb(250, 250, 250);
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
display:inline-block;
vertical-align:top;
text-align:center;
margin:0 auto;
position:relative;
}
.read{
width: 100%;
left: 0;
bottom: 0;
background-color:white;
background:white;
font-size:22px;
height:40px;
line-height:40px;
font-family:Futura;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-o-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
}
.read a{
color:#7e99bd;
}
.wpcf7-form-control-wrap{
background:white;
background-color:white;
}
#media (max-width:767px){
.fbox{
width: 200px;
height: 250px;
background: rgb(250, 250, 250);
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
display:inline-block;
font-size:12px;
}
}
Fiddle

Answer 1

Your third div.fbox is wrapped in a parent div with class .padding which is causing a break in the display: inline-box rule. Remove the div.padding element around the third div.fbox element and your div tags will line up again.

Answer 2

#Travis the fbox is working as inline-block if you want to know more information go through this.

Answer 3

If you want all three boxes inline-block, you will need all three in the same div