3 column layout display:inline-block gap - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:3 Column

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

Description

3 column layout display:inline-block gap

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>

body {<!-- www . j  a  va2  s  .  c  om-->
   margin: 0px;
}
.header {
   background-color: aqua;
   height: 75px;
}
.left {
   float: left;
   width: 25%;
   height: 15px;
   background-color: red;
}
.content {
   float: left;
   width: 50%;
   height: 15px;
   background-color: blue;
}
.right {
   float: left;
   width: 25%;
   height: 15px;
   background-color: green;
}
.footer {
   height: 50px;
   background-color: yellow;
}

      </style> 
 </head> 
 <body> 
  <div class="header">
    Header 
  </div> 
  <div class="left"></div> 
  <div class="content"></div> 
  <div class="right"></div> 
  <div class="footer"></div>  
 </body>
</html>

Related Tutorials