Sidebar border - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border Style

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

Description

Sidebar border

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

<style type="text/css">
   #container<!--  w ww  .  ja  v  a  2  s.com-->
   {
      padding:0px;
      margin:0px;
      background:#BFBFBF;
   }
   #header
   {
      height:100px;
      background-color:#333;
   }
   #header logo
   {
}
#navigation
{
   padding:0px;
   margin:0px;
}
#navigation ul
{
   background-color:#F00;
}
#navigation ul li
{
   text-decoration:none;
   display:inline;
   color:white;
   font-size:16px;
   padding-right:40px;
   padding-top: 0px;
}
#sidebar
{
   display: inline;
   margin-left: 20px;
   width: 300px;
   height:800px;
   border-bottom-color:#666;
   border:1px solid;
   float: right;
   background-image:url(http://www.java2s.com/style/download.png);
   background-repeat:repeat;
}
#content
{
   float:left;
   height: 800px;
   width: auto;
   background-color:#FFF;
   display:inline;
}
#footer
{
   clear:both;
   height:200px;
   background-color:#333;
}


      </style> 
 </head> 
 <body> 
  <title>The New Boston</title> 
  <div id="container"> 
   <div id="header"> 
   </div> 
   <div id="navigation"> 
    <ul> 
     <li> <a href="#"></a> <a></a> Home </li> 
     <li> <a href="#"></a> <a></a> Home </li> 
     <li> <a href="#"></a> <a></a> Home </li> 
     <li> <a href="#"></a> <a></a> Home </li> 
     <li> <a href="#"></a> Home </li> 
    </ul> 
   </div> 
   <!--Header Ends--> 
   <div id="content"> 
    <p>This is a test test test test</p> 
   </div> 
   <!--Content ENDS--> 
   <div id="sidebar"> 
    <p style="float: left;">This is a website.</p> 
   </div> 
   <!--SIDEBAR ENDS--> 
   <div id="footer"> 
   </div> 
   <!--FOOTER ENDS--> 
  </div> 
  <!--CONTAINER ENds-->  
 </body>
</html>

Related Tutorials