Search code examples
htmlcsspositioning

Fixed heading in three columns

I have 3 comumns with text link The 3 columns stays in perfect order if they had the same amount of text. When I write a smaller amount of text in one of the columns I get the following result link

I want the Icons and the text to stay fixed, no matter how many text is below. How can I do that ?

Here is my code:

HTML

  <ul class="columns"> 

        <li class="clearfix"> 

            <span><img src="icon path" /><p>heading</p></span>

        <p>text below</p>

        </li> 

 </ul>

CSS: 

.columns li{display: inline-block; width: 250px; margin-left: 100px;} 

.columns li:first-child{margin: 0;} 

.columns li img{float: left;} 

 .columns li span p{float: left; margin: 30px 0 0 10px; width: 150px; height: 30px; line-height: 1;}

.columns li  p{margin-top: 20px; }
Solution

  • Use

    .columns {
    vertical-align: top;
}