title: Square DIV with Content in a Fluid Layout
body: <p>SO,</p>
  
  <p>I've created a four-column fluid-width layout for a site, and I'm working on placing a fluid square DIV within one of my columns. There are a few techniques I've found to achieve this - namely, setting padding-bottom to the same percentage as the width - but none of these seem to work when the DIV contains content. </p>
  
  <p>Is there a way to maintain a 1:1 (square) ratio on a fluid DIV when that DIV contains content?</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div id="leftmostcolumn"&gt;
  &lt;div id="logo"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="leftcolumn"&gt;&lt;/div&gt;
  &lt;div id="rightcolumn"&gt;&lt;/div&gt;
  &lt;div id="rightmostcolumn"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>body {
  width: 100%;
  height: 100%;
  background-color: red;
  }
  
  #leftmostcolumn {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  background-color: blue;
  }
  
  #leftcolumn {
  position: absolute;
  top: 0;
  left: 25%;
  width: 25%;
  height: 100%;
  background-color: green;
  }
  
  #rightcolumn {
  position: absolute;
  top: 0;
  left: 50%;
  width: 25%;
  height: 100%;
  background-color: yellow;
  }
  
  #rightmostcolumn {
  position: absolute;
  top: 0;
  left: 75%;
  width: 25%;
  height: 100%;
  background-color: gray;
  }
  
  #logo {
  width:100%;
  padding-bottom:100%;
  background-color: #aa2d2d; 
  color: white;    
  }
  </code></pre>
  
  <p>​​
  And here's a <a href="http://jsfiddle.net/4eT7X/22/" rel="nofollow">JsFiddle</a>.</p>
  
  <p>The DIV "logo" is the one I'm trying to maintain as a square. Right now, I've used the padding-bottom approach but that doesn't do the trick when there's content in the DIV. Any input is greatly appreciated!</p>
  
  <p>Marca</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>Getting there...I'm adapting a script I found to find the width of the DIV and then apply that value to the height to keep it a square. However, as it stands now the script doesn't constantly resize the DIV, and it won't allow it to shrink below a certain size. Any thoughts on how to correct either of these issues?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:
  ​    <code>#box { width: 75%; height: 50px; background-color: black; }​</code></p>
  
  <p>JQUERY:</p>
  
  <pre><code>$("#box").css("height", function() { 
  return $(this).width();
  });
  </code></pre>
  
  <p>JsFiddle is <a href="http://jsfiddle.net/Koubenec/REsfs/2/" rel="nofollow">here</a>.</p>