 <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.p_pic-1 { background-image: url(http://www.templatemo.com/templates/templatemo_406_flex/images/member1.jpg); width: 122px; height: 122px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display:block; margin: 0 auto; } .p_pic-2 { background-image: url(http://www.templatemo.com/templates/templatemo_406_flex/images/member1.jpg); width: 122px; height: 122px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display:block; margin: 0 auto; } .p_pic-3 { background-image: url(http://www.templatemo.com/templates/templatemo_406_flex/images/member1.jpg); width: 122px; height: 122px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display:block; margin: 0 auto; } .p_pic-4 { background-image: url(http://www.templatemo.com/templates/templatemo_406_flex/images/member1.jpg); width: 122px; height: 122px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display:block; margin: 0 auto; } .p-1 { float:left; width:220px; height: 100%; background: #a1a1a1; } .p-2 { float: left; width:220px; height: 100%; margin-left: 20px; background: #a1a1a1; } .p-3{ float:left; width:220px; height: 100%; margin-left: 20px; background: #a1a1a1; } .p-4 { float: left; width:220px; height: 100%; margin-left: 20px; background: #a1a1a1; } .p-pics { width: 940px; text-align:center; margin: 70px auto 0 auto; overflow: auto; } .p-name { display: block; float:left; width:100%; font-weight: bold; color: #333; font-size: 16px; } .p-description { font-weight: normal; color: #666; font-size: 16px; text-align: center; float:left; margin-top: 0; } .p_wrap { width: 100%; text-align:center; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="p-pics"&gt; &lt;div class="p-container"&gt; &lt;h2 class="pa_h2"&gt;Head Text&lt;/h2&gt; &lt;div class="p-1"&gt; &lt;a class="p_pic-1" href="index.html"&gt;&lt;/a&gt; &lt;div class="p_wrap"&gt; &lt;h4 class="p-name"&gt;Some Text&lt;/h4&gt; &lt;p class="p-description"&gt;This is just a description, just a text, some text.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="p-2"&gt; &lt;a class="p_pic-2" href="index.html"&gt;&lt;/a&gt; &lt;div class="p_wrap"&gt; &lt;h4 class="p-name"&gt;Some Text&lt;/h4&gt; &lt;p class="p-description"&gt;This is just a description, just a text, some text, text text text.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="p-3"&gt; &lt;a class="p_pic-3" href="index.html"&gt;&lt;/a&gt; &lt;div class="p_wrap"&gt; &lt;h4 class="p-name"&gt;Some Text&lt;/h4&gt; &lt;p class="p-description"&gt;This is just a description, just a text, some text, text text text. Some very-very long text. Just a text, yeah. &lt;/div&gt; &lt;/div&gt; &lt;div class="p-4"&gt; &lt;a class="p_pic-4" href="index.html"&gt;&lt;/a&gt; &lt;div class="p_wrap"&gt; &lt;h4 class="p-name"&gt;Some Text&lt;/h4&gt; &lt;p class="p-description"&gt;This is just a description, just a text, some text, text text text.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>Try this, it was working fine....<a href="https://jsfiddle.net/maheswaran/eo25p0od/" rel="nofollow">https://jsfiddle.net/maheswaran/eo25p0od/</a></p>