0

I clearfixed parent element but I don't know how to fix this type of issue it's happening because I deduct the length of lorem lpsum from some container and it's misplacing. 

@import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
body {

 width:100vw;
 height:100vh;
 /*background-image: url(../images/background.svg);*/
 background-color: #1abc9c;
 box-sizing: border-box;


}
::selection {
 color:#e74c3c;
 background-color: #ecf0f1;
}

.container {
 width:85vw;
 height:auto;
 margin:0 auto;


 
}
.container header {
 background-color: rgb(236, 240, 241);
}
.container header::after {
 content: "";
 display: block;
 clear:both;
}
.container header h1 {
 float:left;
 font-size: 3rem;
 font-size: 4vw;
 padding:1% 1%;
 font-family: 'Amaranth', sans-serif;

}
.container header .m_link {
 float:right;
 padding:0.5vw;
}
.container header .m_link h4 {
 font-family: 'Amaranth',sans-serif;
 font-weight: 200;
 color:#2c3e50;
 font-size: 1rem;
 font-size: 1vw;

}
.container header .m_link h4:nth-child(2) {
 text-align: right;
}

.container section {
 margin-top:1vw;
 padding:0.1vw;

 
}
.container section::after {
 display: table;
 content:"";
 clear:both;
}
.container section .wcon {
 width: 19vw;
 height:auto;
 border:0.5vw solid #ecf0f1;
 border-radius:1vw;
 background-color: #ecf0f1; 
 float:left;
 margin:0 0.6vw 0.6vw 0.6vw;
 padding:0.5vw 0;
}
.container section .wcon:hover {

 background-color: ;
 border-color:#2c3e50;
 cursor: pointer;

}
.container section .wcon:after {
 
 clear: both;
 display: table;
 content:"";
}
.container section .wcon .img_icon {
 display: block;
 margin:0 auto;
 width:18vw;
 height: auto;
}
.container section .wcon h3 {
 font-family: 'Titillium Web',sans-serif;
 text-align: center;
 font-size: 1.5rem;
 font-size: 2vw;
 font-weight: 500;
 color:#2c3e50;
 text-transform: uppercase;
 padding:0.1vw 0;
}
.container section .wcon p {

 text-align: justify;
 font-size: 0.8rem;
 font-size: 1vw;
 font-family: 'Titillium Web',sans-serif;
 font-weight: 100;
 padding:0 0.2vw;
 line-height: 1.3;
 color:#34495e;


}
.container section .wcon p:after {
 content:" Read More";
}
<DOCTYPE html>
<html>
 <head>
  <title> Projects </title>
  <link rel="stylesheet" href="css/style.css">

 </head>

 <body>
   <div class="container">
    <header>
     <h1> Projects </h1>
     
    </header>
   </div>
   <div class="container">
    <section>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
      </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
      </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
     </div>

    </section>
   </div>
 </body>
</html>
halfer
  • 19,824
  • 17
  • 99
  • 186
Mangesh Shelke
  • 29
  • 2
  • 7

2 Answers2

2

clear is a CSS property related to floats. Mainly about preceding floats.
clearfix is a concept, to contain (descending) floats. See SO answers about What is clearfix?

No need of JS in 2015 to do that! An HTML solution with .clear is fine except if you've a lot of breakpoints and situations to manage. Then you'd need different classes like .small-clear there, .large-clear.clear here, etc where prefixes are used as a reminder of which breakpoint they should apply.

Here are 3 solutions in pure CSS:

Using CSS3 :nth-child(an+b) (compatibility: IE9+) to add clear: left every 4 items:

@import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
body {

 width:100vw;
 height:100vh;
 /*background-image: url(../images/background.svg);*/
 background-color: #1abc9c;
 box-sizing: border-box;


}
::selection {
 color:#e74c3c;
 background-color: #ecf0f1;
}

.container {
 width:85vw;
 height:auto;
 margin:0 auto;


 
}
.container header {
 background-color: rgb(236, 240, 241);
}
.container header::after {
 content: "";
 display: block;
 clear:both;
}
.container header h1 {
 float:left;
 font-size: 3rem;
 font-size: 4vw;
 padding:1% 1%;
 font-family: 'Amaranth', sans-serif;

}
.container header .m_link {
 float:right;
 padding:0.5vw;
}
.container header .m_link h4 {
 font-family: 'Amaranth',sans-serif;
 font-weight: 200;
 color:#2c3e50;
 font-size: 1rem;
 font-size: 1vw;

}
.container header .m_link h4:nth-child(2) {
 text-align: right;
}

.container section {
 margin-top:1vw;
 padding:0.1vw;

 
}
.container section::after {
 display: table;
 content:"";
 clear:both;
}
.container section .wcon {
 width: 19vw;
 height:auto;
 border:0.5vw solid #ecf0f1;
 border-radius:1vw;
 background-color: #ecf0f1; 
 float:left;
 margin:0 0.6vw 0.6vw 0.6vw;
 padding:0.5vw 0;
}
.container section .wcon:nth-child(4n+1) {
    clear: left;
}
.container section .wcon:hover {

 background-color: ;
 border-color:#2c3e50;
 cursor: pointer;

}
.container section .wcon:after {
 
 clear: both;
 display: table;
 content:"";
}
.container section .wcon .img_icon {
 display: block;
 margin:0 auto;
 width:18vw;
 height: auto;
}
.container section .wcon h3 {
 font-family: 'Titillium Web',sans-serif;
 text-align: center;
 font-size: 1.5rem;
 font-size: 2vw;
 font-weight: 500;
 color:#2c3e50;
 text-transform: uppercase;
 padding:0.1vw 0;
}
.container section .wcon p {

 text-align: justify;
 font-size: 0.8rem;
 font-size: 1vw;
 font-family: 'Titillium Web',sans-serif;
 font-weight: 100;
 padding:0 0.2vw;
 line-height: 1.3;
 color:#34495e;


}
.container section .wcon p:after {
 content:" Read More";
}
<DOCTYPE html>
<html>
 <head>
  <title> Projects </title>
  <link rel="stylesheet" href="css/style.css">

 </head>

 <body>
   <div class="container">
    <header>
     <h1> Projects </h1>
     
    </header>
   </div>
   <div class="container">
    <section>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
      </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
      </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
     </div>

    </section>
   </div>
 </body>
</html>

Now a display: inline-block solution, with vertical-align: top instead of default baseline (great for text and content, not for layout ;) ).
Compatibility is at least IE8+ (and less with some hacks but who cares anymore?): 

@import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
body {

 width:100vw;
 height:100vh;
 /*background-image: url(../images/background.svg);*/
 background-color: #1abc9c;
 box-sizing: border-box;


}
::selection {
 color:#e74c3c;
 background-color: #ecf0f1;
}

.container {
 width:85vw;
 height:auto;
 margin:0 auto;


 
}
.container header {
 background-color: rgb(236, 240, 241);
}
.container header::after {
 content: "";
 display: block;
 clear:both;
}
.container header h1 {
 float:left;
 font-size: 3rem;
 font-size: 4vw;
 padding:1% 1%;
 font-family: 'Amaranth', sans-serif;

}
.container header .m_link {
 float:right;
 padding:0.5vw;
}
.container header .m_link h4 {
 font-family: 'Amaranth',sans-serif;
 font-weight: 200;
 color:#2c3e50;
 font-size: 1rem;
 font-size: 1vw;

}
.container header .m_link h4:nth-child(2) {
 text-align: right;
}

.container section {
    display: table;
 margin-top:1vw;
 padding:0.1vw;

 
}
.container section::after {
 display: table;
 content:"";
 clear:both;
}
.container section .wcon {
    display: inline-block;
    vertical-align: top;
 width: 19vw;
 height:auto;
 border:0.5vw solid #ecf0f1;
 border-radius:1vw;
 background-color: #ecf0f1; 
    margin-bottom: 0.6vw
/*     Margins ruined. You must take into account 4px gap due to whitespace or better remove whitespace from HTML code
    margin:0 0.6vw 0.6vw 0.6vw;*/
 padding:0.5vw 0;
}
.container section .wcon:hover {

 background-color: ;
 border-color:#2c3e50;
 cursor: pointer;

}
.container section .wcon:after {
 
 clear: both;
 display: table;
 content:"";
}
.container section .wcon .img_icon {
 display: block;
 margin:0 auto;
 width:18vw;
 height: auto;
}
.container section .wcon h3 {
 font-family: 'Titillium Web',sans-serif;
 text-align: center;
 font-size: 1.5rem;
 font-size: 2vw;
 font-weight: 500;
 color:#2c3e50;
 text-transform: uppercase;
 padding:0.1vw 0;
}
.container section .wcon p {

 text-align: justify;
 font-size: 0.8rem;
 font-size: 1vw;
 font-family: 'Titillium Web',sans-serif;
 font-weight: 100;
 padding:0 0.2vw;
 line-height: 1.3;
 color:#34495e;


}
.container section .wcon p:after {
 content:" Read More";
}
<DOCTYPE html>
<html>
 <head>
  <title> Projects </title>
  <link rel="stylesheet" href="css/style.css">

 </head>

 <body>
   <div class="container">
    <header>
     <h1> Projects </h1>
     
    </header>
   </div>
   <div class="container">
    <section>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
      </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
      </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
     </div>

    </section>
   </div>
 </body>
</html>

And finally an IE10+ solution with flexbox. Equal height items for free ;) :
small print: you'll need Autoprefixer or an online tool like http://pleeease.io/play/ in order to write all the needed syntaxes of Flexbox (there've been 3 specs since 2009-2010 ;) )

@import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
body {

 width:100vw;
 height:100vh;
 /*background-image: url(../images/background.svg);*/
 background-color: #1abc9c;
 box-sizing: border-box;


}
::selection {
 color:#e74c3c;
 background-color: #ecf0f1;
}

.container {
 width:85vw;
 height:auto;
 margin:0 auto;


 
}
.container header {
 background-color: rgb(236, 240, 241);
}
.container header::after {
 content: "";
 display: block;
 clear:both;
}
.container header h1 {
 float:left;
 font-size: 3rem;
 font-size: 4vw;
 padding:1% 1%;
 font-family: 'Amaranth', sans-serif;

}
.container header .m_link {
 float:right;
 padding:0.5vw;
}
.container header .m_link h4 {
 font-family: 'Amaranth',sans-serif;
 font-weight: 200;
 color:#2c3e50;
 font-size: 1rem;
 font-size: 1vw;

}
.container header .m_link h4:nth-child(2) {
 text-align: right;
}

.container section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
 margin-top:1vw;
 padding:0.1vw;

 
}
.container section::after {
 display: table;
 content:"";
 clear:both;
}
.container section .wcon {
 width: 19vw;
 height:auto;
 border:0.5vw solid #ecf0f1;
 border-radius:1vw;
 background-color: #ecf0f1; 
 margin:0 0.6vw 0.6vw 0.6vw;
 padding:0.5vw 0;
}
.container section .wcon:nth-child(4n+1) {
    clear: left;
}
.container section .wcon:hover {

 background-color: ;
 border-color:#2c3e50;
 cursor: pointer;

}
.container section .wcon:after {
 
 clear: both;
 display: table;
 content:"";
}
.container section .wcon .img_icon {
 display: block;
 margin:0 auto;
 width:18vw;
 height: auto;
}
.container section .wcon h3 {
 font-family: 'Titillium Web',sans-serif;
 text-align: center;
 font-size: 1.5rem;
 font-size: 2vw;
 font-weight: 500;
 color:#2c3e50;
 text-transform: uppercase;
 padding:0.1vw 0;
}
.container section .wcon p {

 text-align: justify;
 font-size: 0.8rem;
 font-size: 1vw;
 font-family: 'Titillium Web',sans-serif;
 font-weight: 100;
 padding:0 0.2vw;
 line-height: 1.3;
 color:#34495e;


}
.container section .wcon p:after {
 content:" Read More";
}
<DOCTYPE html>
<html>
 <head>
  <title> Projects </title>
  <link rel="stylesheet" href="css/style.css">

 </head>

 <body>
   <div class="container">
    <header>
     <h1> Projects </h1>
     
    </header>
   </div>
   <div class="container">
    <section>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
      </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. 
      </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
     </div>
     <div class="wcon">
      <img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
      <h3> project name </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
     </div>

    </section>
   </div>
 </body>
</html>
Community
  • 1
  • 1
FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • Just a single question and, trust me, nothing behind but just something I want to know. How is your answer now first when listed by "older" when It was not the first?. Does edits changes the order?. And, again, trust me it's not anything against your answer which it was much better, much elaborated and with much more many options. (in fact your upvote is mine) – Alvaro Menéndez Sep 22 '15 at 21:46
  • @AlvaroMenéndez Thanks for the upvote :) I read your answer before writing mine (I refer to it when writing about a fine HTML solution) and another one now deleted about a JS solution (which I refer as "no need for a JS solution") but it seems that accepted answer always comes first according to [meta](http://meta.stackoverflow.com/questions/299343/newer-answer-appearing-as-oldest-when-sorting-by-oldest). If it wasn't accepted yet then there was a problem... – FelipeAls Sep 23 '15 at 08:04
  • It was not when I made the comment, but as I'm not 100% sure about it, maybe I just miss it. np anyway. Good work and see you (maybe) any other day :) – Alvaro Menéndez Sep 23 '15 at 09:05
1

When I have those issues I use to add to the html "clear" div`s. In your case every 4 elements I would include:

<div class="clear"></div>

Where clearclass just have:

.clear {clear:both;}

Probably you may want to do your web responsive as you are not using fixed width, so you could even include more div'sbetween your elements with display:none and clearto make them "visibles" when reaching your viewport width.

as an example I have added a second div like:

<div class="clear2"></div>

every 2 elements with these css:

.clear2 {clear:both; display:none;}

@media only screen and (max-width: 650px) {
    .container section .wcon {width:47%;} /*        
    .clear2 {display:block;}          
    }

(47% is just a fast aproach for 2 elements per row)

JSFIDDLE

Edit: another aproach would be calculate (if the text is going to be, as it looks, dinamic) the max-height of your tallest element and apply that height to all your elements. with this jquery:

$(document).ready(function() {
   var maxHeight = -1;

   $('.wcon').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.wcon').each(function() {
     $(this).height(maxHeight);
   });
 });

Credit to @ghayes in this link

JSFIDDLE

Community
  • 1
  • 1
Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57