title: Adjust Width in CSS on the fly based on a master dynamic width
body: <p>I've got an interesting little problem here I'm trying to adjust the cells of my site based on the dynamic size of the window and while I can easily enough set the master cell to scale the interior cells won't follow it if I simple set them at 100 or similar.</p>
  
  <p>Here's my container</p>
  
  <pre><code>#container {
    background-color: #063;
    width: 980px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #F60100;
    border-right-color: #F60100;
    border-bottom-color: #000000;
    border-left-color: #F60100;
    /* [disabled]opacity: .75; */
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
  </code></pre>
  
  <p>And that works fine but here's where it gets tricky I have a set of slices that serve as sort of book spines that frame the content cell, they are a set size with the body content filling the remainder of the space but so far I've had to set the container and body blocks with set numbers as simple percents won't work</p>
  
  <pre><code>#Option1, #Option2, #Option3, #Option4, #Option5 {
    width: 73px;
    float: left;
    cursor: pointer;
  }
  
  #Option3 {
    width: 70px;
  }
  
  #Option4 {
    width: 90px;
  }
  
  #Option5 {
    width: 72px;
  }
  </code></pre>
  
  <p>These are the static spines so they never change, at least not at the moment as height is a static value in the future id like these to scale for the display but first I need to get just the horizontal scaling working</p>
  
  <pre><code>#Option1Div, #Option2Div, #Option3Div, #Option4Div, #Option5Div {
    width: 594px;
    float: left;
    height: 592px;
    background-color: #000;
    opacity: .9;
    color: #FFF;
    overflow: auto;
    padding: 4px;
    margin: 0px;
  }
  </code></pre>
  
  <p>And this is the body content that is hard coded to the container - the spine div sizes I'd like to make this scale with the container</p>
  
  <p>And a sample of my HTML as requested, I use Javascript to change the content box widths from full to 0 which creates a effect of the shelf opening up to reveal the text but even with the default first frame open it it tries to full the full width and doesn't take into account the spines</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="header"&gt;HEADER PICS&lt;/div&gt;
    &lt;div id="content"&gt;
      &lt;div id="subsection1"&gt;LINKS SET 1&lt;/div&gt;
      &lt;div id="subsection2"&gt;LINKS SET 2&lt;/div&gt;
  
      &lt;div id="Option1"&gt;&lt;img src="assets/Black_Spine.png" name="Option1" height="600" class="options" /&gt;&lt;/div&gt;&lt;div id="Option1Div" class="option-divs"&gt;
         ContentBox1
      &lt;/div&gt;
      &lt;div id="Option2"&gt;&lt;img src="assets/Blue_Spine.png" name="Option2" height="600" class="options" /&gt;&lt;/div&gt;&lt;div id="Option2Div" class="option-divs"&gt;
         ContentBox2
      &lt;/div&gt;
      &lt;div id="Option3"&gt;&lt;img src="assets/Pink_Spine.png" name="Option3" height="600" class="options" /&gt;&lt;/div&gt;&lt;div id="Option3Div" class="option-divs"&gt;
          ContentBox3
      &lt;/div&gt;
      &lt;div id="Option4"&gt;&lt;img src="assets/Red_Spine.png" name="Option4" height="600" class="options" /&gt;&lt;/div&gt;&lt;div id="Option4Div" class="option-divs"&gt;
           ContentBox4
      &lt;/div&gt;
      &lt;div id="Option5"&gt;&lt;img src="assets/Yellow_Spine.png" name="Option5" height="600" class="options" /&gt;&lt;/div&gt;&lt;div id="Option5Div" class="option-divs"&gt;
          ContentBox5
      &lt;/div&gt;
      &lt;div class="breaker"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="footer"&gt;
      FOOTER LINKS 
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Alright so I think I have this figured out, I was able to use jQuery to fetch the width, tweak it as need be and pass it into the CSS. The main containers will resize as needed while resizing and on first load the content cell will grow to fit the size of the window space however I can't get the content cells to fill to fit on resize. Since the user could be in one of the secondary cells I thought it best to do a if check to see if the content cell already had a width higher then 0, if it did just adjust it to match the new values but it doesn't seem to want to work</p>
  
  <pre><code>$(window).resize(function () {
  var pageWidth = $(window).width();
      pageWidth = pageWidth-90;
  var contentWidth = pageWidth-$( '#Option1' ).width();
      contentWidth = contentWidth-$( '#Option2' ).width();
      contentWidth = contentWidth-$( '#Option3' ).width();
      contentWidth = contentWidth-$( '#Option4' ).width();
      contentWidth = contentWidth-$( '#Option5' ).width();
      contentWidth = contentWidth-10;
  $('#container').css("width", pageWidth+"px");
  if ($('#Option1Div').css('width').replace(/[^-d.]/g, '') &gt; 0){
      $('#Option1Div').css("width", contentWidth+"px");
  } else if ($('#Option2Div').css('width').replace(/[^-d.]/g, '') &gt; 0){
      $('#Option2Div').css("width", contentWidth+"px");
  } else if ($('#Option3Div').css('width').replace(/[^-d.]/g, '') &gt; 0){
      $('#Option3Div').css("width", contentWidth+"px");
  } else if ($('#Option4Div').css('width').replace(/[^-d.]/g, '') &gt; 0){
      $('#Option4Div').css("width", contentWidth+"px");
  } else if ($('#Option5Div').css('width').replace(/[^-d.]/g, '') &gt; 0){
      $('#Option5Div').css("width", contentWidth+"px");
  };
  </code></pre>
  
  <p>for reference here is the page load which works fine so its just the if else block</p>
  
  <pre><code>    var pageWidth = $(window).width();
      pageWidth = pageWidth-90;
      var contentWidth = pageWidth-$( '#Option1' ).width();
      contentWidth = contentWidth-$( '#Option2' ).width();
      contentWidth = contentWidth-$( '#Option3' ).width();
      contentWidth = contentWidth-$( '#Option4' ).width();
      contentWidth = contentWidth-$( '#Option5' ).width();
      contentWidth = contentWidth-10;
  $('#container').css("width", pageWidth+"px");
  $('#Option1Div').css("width", contentWidth+"px");
  $('#Option2Div, #Option3Div, #Option4Div, #Option5Div').css("width", "0px");
  </code></pre>