Assigning percentage width to div tabs with borders - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Width

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

Description

Assigning percentage width to div tabs with borders

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">
#tabs<!-- w ww  . j ava2 s. c  o m-->
 {
   width:51em;
}

.menu ul, ,menu li {
   list-style.type:none;
   margin:0;
   padding:0;
}
.menu li {
   display:block;
   float:left;
   text-align:center;
}

#top li {
   background-color:Chartreuse;
   width:51%
}

#bottom li {
   background-color:yellow;
   width:34.34%
}

#left-btm div, #right-btm div
 {
   border-left-color:blue;
   border-right-color:pink;
   border-left-width:medium;
   border-right-width:medium;
   border-left-style:solid;
   border-right-style:solid;
}
</style> 
 </head> 
 <body> 
  <div id="tabs"> 
   <div id="top" class="menu"> 
    <ul> 
     <li>Top 1</li> 
     <li>Top 2</li> 
    </ul> 
   </div> 
   <div id="bottom" class="menu"> 
    <ul> 
     <li id="left-btm"> 
      <div>
        Bottom 1 
      </div> </li> 
     <li> 
      <div>
        Bottom 2 
      </div> </li> 
     <li id="right-btm"> 
      <div>
        Bottom 3 
      </div> </li> 
    </ul> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials