Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Apr 28th, 2012  |  syntax: None  |  size: 2.03 KB  |  hits: 18  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Aligning 2 div's side by side
  2. <head>
  3.     <style>
  4.         div.container{
  5.             position: relative;
  6.             width:800px;
  7.             height: 1000px;
  8.             background-color: red;
  9.             overflow: hidden;
  10.         }
  11.  
  12.         div.banner{
  13.             position: relative;
  14.             align:left;
  15.             width: 800px;
  16.             height: 100px;
  17.             float:left;
  18.             background-color: blue;
  19.             clear:both;
  20.         }
  21.         div.navBar{
  22.             position: absolute;
  23.             width: 200px;
  24.             height: 300px;
  25.             float:left;
  26.             background-color: yellow;
  27.             clear: left;
  28.         }
  29.  
  30.         div.content{
  31.             position: absolute:
  32.             width: auto;
  33.             height: auto;
  34.             float:left;
  35.             background-color: orange;
  36.             clear: right;
  37.         }
  38.     </style>
  39. </head>
  40.  
  41. <body>
  42.     <div name="banner" class="banner">
  43.         This will be the banner
  44.     </div>
  45.  
  46.     <div name="container" class="container">
  47.         <div name="navBar" class="navBar">
  48.             This will be the navbar
  49.         </div>
  50.  
  51.         <div name="content" class="content">
  52.             This will be the content
  53.         </div>
  54.  
  55.     </div>
  56. </body>
  57.        
  58. <div name="banner" class="banner">
  59. This will be the banner
  60. </div>
  61.  
  62.  <div name="container" class="container">
  63.  <div name="navBar" class="navBar">
  64.      This will be the navbar
  65.  </div>
  66.  
  67.  <div name="content" class="content">
  68.     This will be the content
  69.   </div>
  70.   <div name="footer" class="footer">
  71.      Footer
  72.   </div>
  73.        
  74. div.container{
  75.         width:800px;
  76.         height: 1000px;
  77.         background-color: red;
  78.     }
  79.  
  80.     div.banner{
  81.         width: 800px;
  82.         height: 100px;
  83.         background-color: blue;
  84.     }
  85.     div.navBar{
  86.         float:left;
  87.         width: 200px;
  88.         height: 300px;
  89.         background-color: yellow;
  90.     }
  91.  
  92.     div.content{                      
  93.         float:left;
  94.         background-color: orange;
  95.     }
  96.     div.footer{                    
  97.         clear:both;
  98.         background-color: blueviolet;
  99.     }
create a new version of this paste RAW Paste Data