Create three columns of text aligned at the same height or in a row all the time, even when the window is resized

Question

I want the 3 columns aligned at the same height all the time, even when I resize the window. The problem is that the third column does not align with the first two columns. This happens when I reached a width of 1190.

<footer> <div class="f-container"> <div class="container"> <div class="f-item-3col"> <h3>Location</h3> <p>123 My Street, city postal code QC</p> </div><!-- --><div class="f-item-3col"> <h3>Around the web</h3> <p>social media here</p> </div><!-- --><div class="f-item-3col"> <h3>About this site</h3> <p>This website is designed and developed by [your name here].</p> </div> </div> </div> <div class="f-container-bottom"> <div class="container"> <div class="row"><div class="f-item-bottom">Copyright &copy; [website name] 2015</div> </div> <div> 

CSS

 footer { text-align: center; color: #fff; } footer h3 { text-transform: uppercase; margin-bottom: 30px; } .f-container { position: relative; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 50px; background-color: #2c3e50; } .f-container .f-item-3col { display: inline-block; width: 33.33333333%; box-sizing: border-box; -moz-box-sizing: border-box; margin-bottom: 50px; } .f-container-bottom { padding: 25px 0; background-color: #233140; } .f-container-bottom .f-item-bottom { width: 100%; } @media (max-width: 768px) { .f-container .f-item-3col { display: block; width: 100%; } } 

Is it possible? Sorry for my bad english.

Answer 1

display the divs block and swim them to the left.

 .f-container .f-item-3col { display:block; float:left; width: 33.33333333%; box-sizing: border-box; -moz-box-sizing: border-box; margin-bottom: 50px; }