title: How to partition a div into 3 parts separated by borders in html
body: <p>I have a navigation bar on the top of a page.In the next div below navigation bar,I'm trying to partition a div into 3 columns which are separated by their borders but not separated by background color.</p>
  
  <p>I want the background color to be unique for all the 3 partitions.I tried using frameset and frame tags.But it is partitioning the entire page.I don't want an entire page to be partitioned into 3 columns.</p>
  
  <p>Firstly,at the top of the page,I want the navigation bar to be placed and later I want one particular div of that page to be partitioned into 3 columns.How can I achieve this?</p>
  
  <p>Can anyone please help me out regarding this issue ...</p>
  
  <pre><code>My html code:
  
       &lt;!DOCTYPE html&gt;
      &lt;html ng-app="Admin"&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="css/style.css" /&gt;
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/angular-animate.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/Scripts/Home.js"&gt;&lt;/script&gt;
      &lt;script src="js/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script
          src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"&gt;&lt;/script&gt;
      &lt;script src="http://caitp.github.io/ng-media/ng-media.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body class="home"&gt;
          &lt;div ng-controller="Home" class="container"&gt;
              &lt;nav class="navbar navbar-inverse"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;div class="navbar-header"&gt;
                          &lt;img src="images/logo.jpg" style="width: 100px;"&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;ul class="nav navbar-nav"&gt;
                              &lt;li class="active"&gt;&lt;a href="home1.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle"
                                  data-toggle="dropdown" href="#"&gt;EXPLORE OCR &lt;span
                                      class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Option1&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Option2&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Option3&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;&lt;/li&gt;
                              &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle"
                                  data-toggle="dropdown" href="#"&gt;+FEATURES &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Option1&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Option2&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Option3&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;&lt;/li&gt;
                              &lt;li class="dropdown"&gt;&lt;a class="dropdown-toggle"
                                  data-toggle="dropdown" href="#"&gt;HELP &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Option1&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Option2&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Option3&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class="navbar-header"&gt;
                          &lt;ul class="nav navbar-nav navbar-right"&gt;
                              &lt;li&gt;&lt;a href="signIn.html" style="padding-left: 332px;"&gt;SignIn&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="logOut.html"&gt;LogOut&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/nav&gt;
  
          &lt;/div&gt;
      &lt;div&gt;
  // I'm trying to partition this div into 3 columns(left,center,right).
     &lt;/div&gt;
  
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>