title: Is it possible to position an element outside the bounds of it's container using CSS?
body: <p>Hey guys I have an interesting set up going on. I'm working on creating SOME mobile support for an existing site. Basically when the window is brought to a certain size or the page is opened up on a phone I want to the header to do something different. That part is easy the only thing I'm running into is this.</p>
  
  <p>The basic structure of my header is this</p>
  
  <p>[logo][user-stuff][right-side][1][2][3][/right-side]</p>
  
  <p>These elements are all in a nice line in my header. My problem is that in mobile I need one of the elements from inside the containing div on the right to float underneath the header. So I either need it to pop outside of its container or I need its container to take up with the width of the screen. The idea is that it will end up looking like this.</p>
  
  <p>[logo][user-stuff][right-side][1][2][/right-side]<br>
  [&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]</p>
  
  <p>any ideas how this can be done? If I have to use some Javascript to make this possible that's fine, but the markup needs to be minimal as per my bosses instruction. Just a little stumped on the direction.</p>
  
  <p>current html</p>
  
  <pre><code>&lt;div id="header"&gt;
    &lt;div id="logo"&gt;&lt;/div&gt;
    &lt;div id="user-stuff"&gt;&lt;/div&gt;
  
    &lt;div id="right-side"&gt;
      &lt;div id="1" class="right-side-section"&gt;&lt;/div&gt;
      &lt;div id="2" class="right-side-section"&gt;&lt;/div&gt;
      &lt;div id="3" class="right-side-section"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>current css</p>
  
  <pre><code>#header {
    height: 48px;
    width: 100%;
  }
  
  #logo {
    display: inline-block;
    vertical-align: top;
  }
  
  #user-stuff {
    display: inline-block;
    vertical-align: top;
  }
  
  #right-side {
    display: block;
    float: right;
  }
  
  .right-side-section {
    display: inline-block;
    vertical-align: top;
  }
  </code></pre>
  
  <p>Of course this is just a little bit of mockup code to give you an idea of the structure i'm working with and how everything is laid out. I just need to figure out a way to have div#3 drop underneath everything and take up the width of the screen when the screen is a certain size. Not sure how to have it breaks it's flow. </p>