title: Hiding child elements in a responsive/percentage-based layout?
body: <p><strong>Consider this HTML</strong>:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="parent"&gt;
      &lt;div id="child"&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien congue, fringilla justo quis, aliquam tellus. Maecenas semper consectetur metus eget varius. Curabitur imperdiet sagittis leo, a mollis dui lobortis in. In ac facilisis tortor. Nam vitae pellentesque lorem, non commodo lacus.
      &lt;div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The aim here is to try and have the parent <code>div</code> hide the child <code>div</code> with <code>overflow:hidden</code>. But the intended use is to animate/change the parent <code>div</code> width to 'reveal' the child's content. To be clear, I don't need the animation/change code for this purpose. I simply need a solid base of HTML/CSS such that it will be possible to animate/change at runtime while retaining these original rules:</p>
  
  <ul>
  <li>the parent must be a percentage width of the screen (with the intention of animating its width in order to reveal/hide its child).</li>
  <li>the child must also be a percentage width of the screen.</li>
  <li>the child must not wrap its contents according to its parent.</li>
  <li>the parent should only reveal as much as the child as it can given its width.</li>
  <li>No absolute widths in pixels.</li>
  <li>No CSS3.</li>
  <li>No JavaScript.</li>
  </ul>
  
  <hr>
  
  <p><strong>Example</strong>:</p>
  
  <p>Here's an example of what I'm trying to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/leE63.jpg" alt="aims"></p>
  
  <p>In this example, only the parent <code>div</code> section of the child <code>div</code> should be viewable. But the child's content shouldn't wrap, and both the parent and the child should be percentage widths of the screen.</p>
  
  <hr>
  
  <p><strong>What I've Tried</strong>:</p>
  
  <p>So far, I've attempted with this CSS:</p>
  
  <pre><code>html, body{
  
    height:100%;
  
  }
  
  #parent{
  
    position:relative;
  
    width:15%;
    height:100%;
  
    overflow:hidden;
  
  }
  
  #child{
  
    position:absolute;
  
    width:200%;
  
  }
  </code></pre>
  
  <p>The problem with the CSS above is that the child <code>div</code> is constantly adjusting its <code>width</code> according to its parent <code>div</code>, so 'revealing' the child <code>div</code> by increasing the percentage width of its parent is virtually impossible until the childs content has 'unwrapped' itself fully.</p>
  
  <hr>
  
  <p><strong>You May Ask</strong>:</p>
  
  <ul>
  <li><em>Why not remove <code>position:relative</code> from the parent so that the child width remains consistent to the screen?</em></li>
  </ul>
  
  <p>Because in order to hide an absolutely positioned child element, the parent needs to have its position set to <code>relative</code>.</p>
  
  <ul>
  <li><em>Why not make the child element <code>static</code> or <code>relative</code>?</em></li>
  </ul>
  
  <p>Because then the content of the child wraps according to its parent, making it impossible to 'hide' anything.</p>
  
  <ul>
  <li><em>Why is the child at 200%?</em></li>
  </ul>
  
  <p>So that it can have a relative width (to the screen) of 30%. Because the parent is 15%, the child needs to be double its parents percentage width in order to achieve a 30% fill of the screen.</p>
  
  <ul>
  <li><em>Can we use absolute widths in pixels?</em></li>
  </ul>
  
  <p>No.</p>
  
  <ul>
  <li><em>Can we use CSS3?</em></li>
  </ul>
  
  <p>No.</p>
  
  <ul>
  <li><em>Can we use JavaScript?</em></li>
  </ul>
  
  <p>No. If we could use JavaScript, I wouldn't be asking this question, I'd be in the pub. :-)</p>