Layout four column with percentage width - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:4 Column

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

Description

Layout four column with percentage width

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
* {<!--from  www.  j  a va  2s. co m-->
   font-family: Segoe UI; 
   margin: 0; 
   padding: 0;
}
header {background: #000; color: #fff; padding: 5px;}
.content {overflow: hidden;}
.side {float: left; width: 20%; background: #CCC; height: 300px;}
.main {float: right; width: 80%;}
.three-col {overflow: hidden;}
.three-col .col {float: left; width: 33.333%;}
.small-msg-box {height: 100px; background: #080;}
.small-msg-box:first-child {background: #fcc;}
.intro {background: #EEE; height: 100px;}
.sec-img {background: #0ff; height: 200px;}
.other {background: red; height: 200px;}

      </style> 
   </head> 
   <body> 
      <header>
          Models Point 
      </header> 
      <div class="content"> 
         <div class="side">
             Whole Page 
         </div> 
         <div class="main"> 
            <div class="intro">
                Lorem ipsum dolor sit amet? 
            </div> 
            <div class="boxes three-col"> 
               <div class="col sec-img">
                   Second Image 
               </div> 
               <div class="col"> 
                  <div class="row small-msg-box">
                      Small Message Box 
                  </div> 
                  <div class="row small-msg-box">
                      Third Message Box 
                  </div> 
               </div> 
               <div class="col other">
                   Other image box next to the message box 
               </div> 
            </div> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials