Separate div to 3 columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:3 Column

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

Description

Separate div to 3 columns

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#our_services {<!--from w  w w  .  ja  v  a  2s. co m-->
   background-color: red;
   color: black;
   height: 450px;
   margin: auto;
   overflow: auto;
   text-align: center;
}
#try {
   background-color: orange;
   display: table;
   height: 50%;
   margin: auto;
   width: 50%;
   border-collapse: separate;
   border-spacing: 10px;
}
.product{
   display: table-cell;
   height: 75%;
   margin: 5px;
   width: 30%;
}
#product1 {
   background-color: green;
}
#product2 {
   background-color: pink;
}
#product3 {
   background-color: blue;
}


      </style> 
 </head> 
 <body> 
  <div id="our_services" class="container"> 
   <h1>This is a test This is a test</h1> 
   <div id="try"> 
    <div id="product1" class="product"> 
    </div> 
    <div id="product2" class="product"> 
    </div> 
    <div id="product3" class="product"> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials