Home/ Questions/Q 3982308
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T05:30:45+00:00

I have following HTML+CSS markup: <div id=protofade style=position: relative;> <div style=position: absolute;><img src=slide-01.jpg></div> <div

  • 0

I have following HTML+CSS markup:

<div id="protofade" style="position: relative;">
    <div style="position: absolute;"><img src="slide-01.jpg"></div>
    <div style="position: absolute;"><img src="slide-02.jpg"></div>
    <div style="position: absolute;"><img src="slide-03.jpg"></div>
</div>

Notice that the slides are absolute-positioned inside a relative-positioned element so that the top-left corners of all slides are aligned together. All slides are equal height, but the height is not pre-determined hence this problem: the “protofade” div does not have a height. Is there any CSS trick that can make this div as tall as the first slide without explicitly specifying height: NNpx.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <div id="protofade" style="position: relative;">
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #F66;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #6F6;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #66F;"></div></div>
<div style="visibility:hidden;"><div style="width: 200px; height: 50px; background: red;"> This should be a second copy of slide one </div></div>
</div>

    The above code shows your original code (except with divs, as per Scott Brown, above), with the addition of a second copy of “slide 1”, positioned with the default algorithm, but with its box hidden. Accordingly, it’s container, protofade, has to be large enough to accomomdate the box, even though the box is not displayed.

    • 0