I've encountered a problem with displaying 5 images horizontally on the screen. For some reason, I'm unable to set the height of the Div "block-before-description". In FireBug, the height appears as 0 while the 20px margin is visible. Despite trying various methods such as floating, display:block, and different positioning options, including absolute/relative, I haven't been able to resolve the issue. Interestingly, when I remove the images and leave only the headings, the block shows the correct height to cover the headings.
<style type ="text/css">
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px; }
.col-md-2 {
float: left;
width: 16.66667%;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.feat-icons {
text-align: center;
}
.block-before-description {
margin-bottom: 20px;
padding: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="block-before-description">
<div class="col-md-2 feat-icons">
<img src="icons/30-Days-Support.jpg" width="105" height="105" alt=""/>
<h4>Support</h4>
</div>
<div class="col-md-2 feat-icons">
<img src="icons/Design-Icon.jpg" width="105" height="105" alt=""/>
<h4>Premium Design</h4>
</div>
<div class="col-md-2 feat-icons">
<img src="icons/Features.jpg" width="105" height="105" alt=""/>
<h4>Features</h4>
</div>
<div class="col-md-2 feat-icons">
<img src="icons/Guide-Icon.jpg" width="105" height="105" alt=""/>
<h4>Guide Included</h4>
</div>
<div class="col-md-2 feat-icons">
<img src="icons/Mobile-Icon.jpg" width="105" height="105" alt=""/>
<h4>Mobile Supported</h4>
</div>
</div>
</div>
</body>
</html>
If anyone has any insights or solutions to this issue, please feel free to share. Any help would be greatly appreciated.