3 column layout with inline block - 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 with inline block

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
*, *:before, *:after {<!--from  ww w.j a v a 2 s  . com-->
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}
.content-wrapper {
   width: 1000px;
   margin-right: auto;
   margin-left: auto;
   border: 1px solid red;
   overflow: hidden;
}
.column {
   float: left;
   padding: 1em;
}
.what {
   width: 25%;
   margin-right: 1%;
   background-color: orange;
}
.main-content {
   width: 48%;
   margin-right: 1%;
   background-color: yellow;
}
.where {
   width: 25%;
   background: red;
}

      </style> 
   </head> 
   <body> 
      <div class="content-wrapper"> 
         <div class="column what"> 
            <h2>title</h2> 
            <p>Bla bla bla</p> 
         </div> 
         <div class="column main-content"> 
            <h2>Latest News and Events</h2> 
         </div> 
         <div class="column where"> 
            <h2>title title title</h2> 
         </div> 
      </div> 
      <!-- .content-wrapper -->  
   </body>
</html>

Related Tutorials