CSS - Floating sections left and right, responsive design -


i trying create responsive layout sections of article appear in right hand column on larger breakpoints. sections in each column must stack on top of each other.

the problem having box 4 appearing opposite box 3, creating unwanted gap under box 2 in right hand column.

.wrapper {    width: 400px;  }  .section {    width: 50%;  }  .left {    float: left;    clear: left;    background-color: #e26a6a;  }  .right {    float: right;    clear: right;    background-color: #dcc6e0;  }
<body>    <div class="wrapper">      <div class="section left">1 lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure        dolor</div>      <div class="section right">2</div>      <div class="section left">3</div>      <div class="section right">4</div>    </div>  </body>

set minimum height or height section div

.section {     min-height: 200px;     width: 50%; } 

http://jsfiddle.net/awkol2sw/


Comments

Popular posts from this blog

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -