Put two columns side by side using floats - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

Put two columns side by side using floats

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Shajia Abidi</title> 
  <style>

header {<!--from  w w  w.  j a  va  2  s.co m-->
   background: black;
   color: white;
   overflow: hidden;
}
header h1 {
   text-align: center;
   width: 50%;
   margin: 0 auto;
   padding: 55px 0 0 0;
   text-transform: uppercase
}
header ul {
   padding: 0;
   list-style: none;
   overflow: hidden;
   text-align: center;
}
header ul li {
   width: 50%;
   margin: 0 auto;
   display: inline;
   text-transform: uppercase;
   padding: 5px;
}
section {
   width: 45%;
   overflow: hidden;
   float: left;
}
section .columnas {
   background: red;
   width: 280px;
   height: 200px;
   margin: 15px 15px 0 0;
   float: left;
}
aside {
   width: 30%;
   float: right;
   margin-top: 15px;
}
aside div {
   background: blue;
   width: 200px;
   height: 200px;
}


      </style> 
 </head> 
 <body translate="no"> 
  <header> 
   <h1>Leonardo da Vinci</h1> 
   <nav> 
    <ul> 
     <li> <a>Inicio</a> </li> 
     <li> <a>Bio</a> </li> 
     <li> <a>Obras</a> </li> 
     <li> <a>Legado</a> </li> 
    </ul> 
   </nav> 
  </header> 
  <section> 
   <div class="columnas"></div> 
   <div class="columnas"></div> 
   <div class="columnas"></div> 
   <div class="columnas"></div> 
  </section> 
  <aside> 
   <div></div> 
  </aside>  
 </body>
</html>

Related Tutorials