Add borders to div for three column layout - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:3 Column

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

Description

Add borders to div for three column layout

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">

#container {<!--   ww w .j a  va 2 s .c  o m-->
   width: 970px;
   background-color: #FFF;
   margin: 0 auto;
   overflow: hidden;
}
#sidebar1 {
   float: left;
   width: 180px;
   border: 2px solid black;
   background-color: #EADCAE;
   padding: 0px 0px 100% 0px;
}
#content {
   padding: 10px 0;
   width: 600px;
   float: left;
}
#sidebar2 {
   float: left;
   width: 180px;
   border: 2px solid black;
   background-color: #EADCAE;
   padding: 0px 0px 100% 0px;
}


      </style> 
 </head> 
 <body> 
  <div id="container"> 
   <div id="sidebar1"></div> 
   <div id="content"> 
    <h3>Lorem ipsum</h3> 
    <p>Lorem ipsum dolor sit amet, ipsum animal dissentias et pro. Nec ad amet alii. Mel ne vero regione, vim ei odio novum. Decore necessitatibus vix id. Mei cibo tation necessitatibus no. Quot probo ad his. No omnes mollis mnesarchum per, his ullum tractatos id. Ea enim docendi qui, in possit menandri vel. Mei ad persius patrioque. Pri duis mollis te, erant veritus vis cu. Duo cu mucius atomorum intellegam, per ei brute luptatum. Dico facilisis deterruisset eum cu. Elitr dolorum blandit eu usu, sea utinam dissentias cu, ei vivendum detraxit pericula sea. Ad ius causae ornatus mediocrem, pri dolore discere assueverit ea. In summo veritus maiorum pri, ea per ignota salutandi. Quas invenire expetenda ut pri, eum scripta necessitatibus ut. No vel simul graeco probatus, nec discere facilis id, utamur quaestio eam te. Ne dolorem mnesarchum nam, augue ludus indoctum mel ex. Et congue iriure neglegentur sed. Ad ius simul dolore, quas nostro principes mei ei. Eum purto scriptorem ne. Ad per tation partiendo, homero tamquam reprehendunt et eam. Usu cu legere civibus repudiare, ex duo altera nominavi appellantur. Pro homero munere ne, ut sed atqui dolores praesent, te sit iisque salutatus.</p> 
   </div> 
   <div id="sidebar2"></div> 
  </div>  
 </body>
</html>

Related Tutorials