title: Coloring around divs within a flexbox
body: <p>I'm trying to make a website's footer. In the image you see how it is supposed to be, and what I got. I was trying to get the location of my div called <code>secretarias</code> and the location of my div called <code>direita</code> because I wanted my blue divs to color AROUND these two, like in the image.</p>
  
  <p>but jquery's location didn't work. And I'm not even sure it's a good way of doing that. I just want to color a couple of pixels more than what's colored around both these divs, and make that circular border around.</p>
  
  <p>And also: I couldn't get div <code>"rights"</code> to be perfectly aligned on center. It's the only one that has a problem because its font size has got to be a little bit smaller than the others.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*
  var position = $("#secretarias").position();
  var bottom_l = position.bottom;
  var left_l = position.left;
  
  $("#rodapecor01").css("bottom: ",bottom_l, "left: ",left_l);
  
  var position2 = $("#direita").position();
  var bottom_r = position2.bottom;
  var left_r = position2.left;
  
  $("#rodapecor02").css("bottom: ",bottom_r, "left: ",left_r);
  
  I couldn't make my JQuery work here but you can check it on the fiddle: http://jsfiddle.net/o2gxgz9r/552/
  */</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#rodape {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 27.5%;
   background: #e7e7dc;
   
   font-size: 3vh;
   font-family: PT_Sans-Web-Regular;
   text-align: center;
   
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
  }
  
  #organizador {
   width: 48.60015522%;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   flex-flow: row nowrap;
   justify-content: space-around;
  }
  
  #centro {
   width: 90%;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   flex-flow: row nowrap;
   justify-content: flex-start;
  }
  
  #secretarias {
   width: 11.95230368%;
   background: #541324;
   color: white;
   text-align: right;
  }
  
  .linha {
   width: 4%;
   text-align: center;
  }
  .menurodape {
   text-align: center;
  }
  
  #direita {
   width: 39.4475411%;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   flex-flow: row nowrap;
   justify-content: space-between;
   background: #541324;
   color: white;
  }
  
  #mapadosite {
   
  }
  
  #rights {
   font-size: 1.5vh;
   text-align: center;
  }
  
  #rodapecor01 {
   /* background:#541324; */
   background: lightblue;
    position: absolute;
    bottom: 15%;
    left: 5%;
    width: 5%;
    height: 5%;
  }
  
  #rodapecor02 {
   /* background:#541324; */
   background: lightblue;
    position: absolute;
    bottom: 15%;
    right: 5%;
    width: 5%;
    height: 5%;
  }
  
  #rodapelinha {
    background:#541324;
    position: absolute;
    bottom: 27%;
    width: 100%;
    height: 2%;
  }
  #whatimtryingtodo{
   background: url('https://i.imgsafe.org/60c6fb0a1d.jpg');
   background-repeat: no-repeat;
   position:absolute;
   top: 20px;
   width: 100%;
   height: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>What I'm trying to do:
  &lt;div id="whatimtryingtodo"&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  What I got:
  &lt;div id="rodapelinha"&gt;
  &lt;/div&gt;
  
  &lt;footer id="rodape"&gt;
    &lt;div id="secretarias"&gt;SECRETARIAS:&lt;/div&gt;
   &lt;div id="organizador"&gt;
    &lt;div id="centro"&gt;
     &lt;div class="menurodape"&gt;DESENVOLVIMENTO&lt;/div&gt;
     &lt;div class="linha"&gt;|&lt;/div&gt;
     &lt;div class="menurodape"&gt;SAÚDE&lt;/div&gt;
     &lt;div class="linha"&gt;|&lt;/div&gt;
     &lt;div class="menurodape"&gt;EDUCAÇÃO&lt;/div&gt;
     &lt;div class="linha"&gt;|&lt;/div&gt;
     &lt;div class="menurodape"&gt;SEGURANÇA&lt;/div&gt;
     &lt;div class="linha"&gt;|&lt;/div&gt;
     &lt;div class="menurodape"&gt;CULTURA&lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   
   &lt;div id = "direita"&gt;
    &lt;div id="mapadosite"&gt;MAPA DO SITE&lt;/div&gt;
    &lt;div id="rights"&gt;© 2016 UNA-SUS/UFCSPA - Todos os direitos reservados &lt;/div&gt;
   &lt;/div&gt;
   
  &lt;/footer&gt;
  
  
  &lt;div id="rodapecor01"&gt;
  &lt;/div&gt;
  &lt;div id="rodapecor02"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>