Floating div two column layout blank space - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. 2 Column

Description

Floating div two column layout blank space

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>

.outer {border:solid #f00; padding:10px;overflow:auto}
.outer div{border:solid 1px #f00; float:left; margin:5px}
.outer div:nth-child(odd) {clear:both;}

      </style> 
 </head> <!--from w  ww  .ja  va  2 s  . c o m-->
 <body> 
  <div class="outer"> 
   <div>
     test
    <br> test
    <br> test
    <br> test
    <br> test
    <br> test
    <br> 
   </div> 
   <div>
     test
    <br> test
    <br> test
    <br> 
   </div> 
   <div>
     test
    <br> test
    <br> test
    <br> test
    <br> test
    <br> test
    <br> 
   </div> 
   <div>
     test
    <br> test
    <br> test
    <br> test
    <br> test
    <br> test
    <br> 
   </div> 
   <div>
     test
    <br> test
    <br> test
    <br> test
    <br> test
    <br> test
    <br> 
   </div> 
   <div>
     ontent content content content 
    <br> test
    <br> test
    <br> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials