title: Create a left and right spacer in CSS around flash content in the body of a website
body: <p><strong>Option 1</strong></p>
  
  <p>Below is a general layout of a site im trying to construct. The green regions are the sites header and footer. The blue region is flash content who’s height changes depending on what is displayed. The red region are two spacers im trying to construct that bound the flash content and their sizes change according to the width of the browser however the width of the flash content stays static. </p>
  
  <p><img src="https://i.stack.imgur.com/rBkY7.png" alt="enter image description here"></p>
  
  <p>Where im getting hung up is how do i create these spaces in css. I assume that i would use CSS to solve this problem correctly.</p>
  
  <p>For example, in the CSS file i need to set the background color and height as they as always going to be static, only the width changes.</p>
  
  <pre><code>#left spacer {
      background-color: #881E42;
      height: 46px;
      float: left;
  }
  #right spacer {
      background-color: #881E42;
      height: 46px;
      float: right;
  }
  </code></pre>
  
  <p>How can i set the width of right and left spacer to (Browser width - Flash Content width)/2 
  Where the width of the flash content is static at 920px.</p>
  
  <p>I'm not sure how to govern the width of the spacers.</p>
  
  <p>Somehow the width of the spacers needs to be set to a size of (Browser width - flash content width)/2
  In this example the static width of the flash content is 920px and the browser width is variable. so say the browser width is 1920px than the size of each spacer would be 500px per container. I would also set the minimum width of each spacer to 20px so they show up if the browser width is below a certain threshold. </p>
  
  <p><strong>Opetion 2</strong></p>
  
  <p>The other idea that i had was to create 1 container which housed the flashcontent</p>
  
  <pre><code>&lt;div id="container"&gt;
  *Flash content scipt goes here
  &lt;/div&gt;
  </code></pre>
  
  <p>I dont know how to do this or even if its possible, but it would work</p>
  
  <pre><code>#Container{
          psudo code
          Color 1: #881E24
          Color 1 height: 25px
          Color 1 width: 100%
          background-color: #FFFFFF;
          height: auto;
          width: 100%;
          text-align: center;
      }
  </code></pre>