Got trouble with div after floated 2 column - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

Got trouble with div after floated 2 column

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

body {<!--from   w ww. j  a v a2 s  . c om-->
   background: #34495e;
   padding: 50px 0px;
}

.end {
   -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.48);
   -moz-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.48);
   box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.48);
}

.container {
   background: #ecf0f1;
   min-height: 480px;
   width: 700px;
   margin: 0px auto;
}

.container h1 {
   margin: 0px;
   padding: 0px;
}

.right,
.left {
   display: inline-block;
   padding: 15px;
   Font-weight: bold;
   font-size: 20px;
   color: #fff;
   float: left;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.left {
   width: 20%;
   background: #2c3e50;
   border-bottom: 1px solid #34495e;
}

.right {
   width: 80%;
   background: #16a085;
   border-bottom: 1px solid #1abc9c;
}

.hright,
.hleft {
   display: inline-block;
   font-weight: bold;
   font-size: 20px;
   color: #fff;
   float: left;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.hleft {
   float: left;
   width: 20%;
   background: red;
   border-bottom: 1px solid blue;
   line-height: 100px;
   text-align: center;
}

.hright {
   float: left;
   width: 80%;
   background: #27ae60;
   border-bottom: 1px solid #2ecc71;
   padding-left: 10px;
   line-height: 100px
}

.download {
   float: left;
   text-align: center;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="container"> 
   <div class="hinfo"> 
    <div class="hleft">
      Back 
    </div> 
    <div class="hright"> 
     <h1>Drive Nuts</h1> 
    </div> 
   </div> 
   <div class="info"> 
    <div class="left">
      Call No. 
    </div> 
    <div class="right">
      Datas 
    </div> 
   </div> 
   <div class="info"> 
    <div class="left">
      Call No. 
    </div> 
    <div class="right">
      Datas 
    </div> 
   </div> 
   <div class="info"> 
    <div class="left end">
      Call No. 
    </div> 
    <div class="right end">
      Datas 
    </div> 
   </div> 
   <div class="download"> 
    <a href="">Pull now</a> 
   </div> 
  </div> 
  <div style="clear:both;"></div>  
 </body>
</html>

Related Tutorials