Surrounding page with a border using div tags - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div Border

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

Description

Surrounding page with a border using div tags

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

#content<!--from  w  w w .ja  va2s . com-->
{
   background: #eee;
   border: 5px solid #68accc;
   padding: 0px;
}
#content_topTitle
{
   text-align: center;
   height: 35px;
   line-height: 35px;
   font-weight: bold;
}
#content_images
{
   width:880px;
   height:200px;
}
#content_col1
{
   float: left;
   width: 130px;
   padding: 10px;
}
.clear
{
   clear:both;
}
.hasLayout {
   zoom: 1;
}
.hasLayout:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}


      </style> 
 </head> 
 <body> 
  <div id="content" class="hasLayout"> 
   <div id="content_topTitle">
     Welcome to the greatest local online grocery store the world has ever seen! 
   </div> 
   <div id="content_images"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
   </div> 
   <div id="content_col1"> 
    <table width="100%" cellpadding="0" cellspacing="0"> 
     <tbody> 
      <tr> 
       <td class="departments"> <a class="departments" href="">Bakery</a> </td> 
      </tr> 
      <tr> 
       <td class="departments"> <a class="departments" href="">Vegetables</a> </td> 
      </tr> 
      <tr> 
       <td class="departments"> <a class="departments" href="">Sweets</a> </td> 
      </tr> 
      <tr> 
       <td class="departments"> <a class="departments" href="">Meats</a> </td> 
      </tr> 
      <tr> 
       <td class="departments"> <a class="departments" href="">Dairy</a> </td> 
      </tr> 
      <tr> 
       <td class="departments"> <a class="departments" href="">Bakery</a> </td> 
      </tr> 
      <tr> 
       <td class="departments"> <a class="departments" href="">Vegetables</a> </td> 
      </tr> 
      <tr> 
       <td class="departments"> <a class="departments" href="">Sweets</a> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials