Consider the following HTML code snippet:
<div class="one">
Test
</div>
<div class="two">
</div>
<div class="three">
</div>
If we apply the following CSS styles:
div {
display:inline-block;
height:30px;
width:100px;
}
.one,
.three
{
background-color:#CCCCCC;
}
.two
{
background-color:#EEEEEE;
}
The three div elements do not align next to each other, as shown in this Fiddle link:
Why is this happening and how can it be fixed?
By removing the text inside the div elements, they will appear as intended. Check out the corrected version in this Fiddle link: