Contemplate this HTML:
<body>
<div id="parent">
<div id="child">
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.
<div>
</div>
</body>
The objective here is to conceal the child div within the parent div using overflow:hidden. However, the goal is to eventually modify/animate the width of the parent div to 'uncover' the content of the child. I am not seeking the code for the animation/change, but rather a foundation of HTML/CSS that allows for runtime modification while adhering to these initial rules:
- the parent should have a percentage width relative to the screen (to enable width modulation for hiding/revealing the child).
- the child should also have a percentage width relative to the screen.
- the child's content must not wrap according to the parent's width.
- the parent should reveal only as much of the child's content as possible given its width.
- Avoid absolute pixel widths.
- No use of CSS3 features.
- No inclusion of JavaScript.
Illustration:
Here is an example of the desired outcome:
In this demo, only the portion of the child div enclosed by the parent div should be visible. The child's content should not wrap, and both elements should occupy percentage widths of the screen.
Previous Attempts:
I've experimented with the following CSS so far:
html, body{
height:100%;
}
#parent{
position:relative;
width:15%;
height:100%;
overflow:hidden;
}
#child{
position:absolute;
width:200%;
}
The issue with this CSS snippet is that the child div constantly adjusts its width based on the parent div, making it nearly impossible to gradually 'reveal' the child div by increasing the parent's percentage width until the child's content fully "unwraps."
Potential Questions:
- Why not remove
position:relativefrom the parent to maintain consistent child width?
This adjustment is necessary for concealing an absolutely positioned child element, as the parent needs to have a relative position.
- Why not set the child element as
staticorrelative?
If so, the child's content would wrap according to the parent, impeding any attempts at discreetly 'hiding' content.
- Why is the child dimension set to 200%?
To maintain a relative width of 30% (in relation to the screen). Given the parent occupies 15%, the child must span twice the parent's width to fill 30% of the screen.
- Can we employ fixed pixel widths?
No.
- Can we implement CSS3 techniques?
No.
- Can we utilize JavaScript?
No. If JavaScript were permissible, I wouldn't be pondering this query—I'd be enjoying some drinks at the pub. :-)