I have been through numerous discussions on the same problem, but none of the solutions seem to work in my case. I am currently working on a section of my website that has 3 small boxes, each containing an image on top and text below. The issue arises when I float one to the right to align them horizontally; it moves to the right but doesn't move up alongside the others.
Below is the relevant part of my code for the divs.
CSS:
#features {
background:yellow;
position: relative;
width: 100%;
padding-bottom: 50px;
padding-top: 50px;
height: 400px;
}
#features .section2 {
margin: 0 auto;
background: blue;
width: 960px;
height: auto;
}
#column_1 {
background: orange;
width: 290px;
}
#column_1 .index-icon {
width: 290px;
}
#column_1 .index-icon img.news_image {
margin-left: 103px;
width: 90px;
height: 90px;
}
#column_1 .text {
padding-top: 30px;
}
#column_1 .text h4 {
text-align: center;
}
#column_1 .text p {
font-size: 14px;
text-align: center;
padding-top: 20px;
color: #659EC7;
}
#column_2 {
width: 290px;
background: pink;
}
#column_2 .index-icon img.news_image {
margin-left: 103px;
width: 90px;
height: 90px;
}
#column_2 .text {
padding-top: 30px;
}
#column_2 .text h4 {
text-align: center;
}
#column_2 .text p {
font-size: 14px;
text-align: center;
padding-top: 20px;
color: #659EC7;
}
HTML:
<section id="features">
<div class="section2">
<div id="column_1">
<div class="index-icon"><img class="news_image" src="images/mail.png"></div>
<div class="text">
<h4> NEWS </h4>
<p> We're not just great Photoshoppers also have experience developing products as entrepreneurs. This allows us to contribute to your project beyond just the design. </p>
</div>
</div>
<div id="column_2">
<div class="index-icon"><img class="news_image" src="images/mail.png"></div>
<div class="text">
<h4> NEWS </h4>
<p> We're not just great Photoshoppers also have experience developing products as entrepreneurs. This allows us to contribute to your project beyond just the design. </p>
</div>
</div>
</div>
</section>
Your help with this issue is greatly appreciated. Thank you!