Aligning five divs next to each other - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Div

Description

Aligning five divs next to each other

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
#wrap{<!--   w  w w . j a v  a  2s.  c o m-->
   width: 100%;
   height: 600px;
   background-color: #000;
   border: 1px solid white;
}
#fp1{
   width: 20%;
   height: 600px;
   background-color: #333;
   float: left;
}
#fp2{
   width: 20%;
   height: 600px;
   float: left;
   background-color: #666;
}
#fp3{
   width: 20%;
   height: 600px;
   float: left;
   background-color: #333;
}
#qual{
   width: 20%;
   height: 600px;
   background-color: #666;
   float: left;
}
#race{
   width: 20%;
   height: 600px;
   background-color: #333;
   float: left;
}

      </style> 
   </head> 
   <body> 
      <div id="wrap"> 
         <div id="fp1">
             FP1 
         </div> 
         <div id="fp2">
             FP2 
         </div> 
         <div id="fp3">
             FP3 
         </div> 
         <div id="qual">
             Qual 
         </div> 
         <div id="race">
             Race 
         </div> 
      </div> 
      <!--End wrap div-->  
   </body>
</html>

Related Tutorials