I have two elements with some text:
child1: 'one two three four'
child2: 'one two'
- I want to put child2 on top of child1 like this.
- I also want the parent element to take as much space as child1 (the bigger one).
So far I was able to accomplish only point 1 like this:
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
background-color: gray;
}
#child1 {
position: fixed;
}
#child2 {
position: sticky;
color: red;
}
</style>
</head>
<body>
<div>
<div id="parent">
<span id="child1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam vulputate interdum non porta tortor. Quisque eu mattis dolor. Vestibulum tincidunt lobortis lobortis. Aliquam dignissim enim molestie massa facilisis sagittis. Aenean vel nibh sagittis, rhoncus tellus quis, commodo est. Cras convallis eu magna id dignissim. Quisque leo sem, suscipit vitae gravida at, dapibus et erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et tortor hendrerit, cursus risus non, viverra tellus. Aliquam laoreet erat risus, eu pulvinar tortor vulputate nec. Etiam velit ipsum, gravida eu iaculis ut, mollis vitae arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dictum consectetur neque, nec porta justo tincidunt vitae. Curabitur metus nisl, dictum ut turpis a, dignissim venenatis dolor.
</span>
<span id="child2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac enim eget quam
</span>
</div>
<div id="nextElem">##############</div>
</div>
</body>
</html>
How to make parent div take as much space as child1? Or take as much space as needed to fit all children?
Is there a way to do that without specifying absolute size for the parent?
New contributor
Neo Tune is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.