Hey there! I have 3 unique rectangles defined in my css stylesheet.
#background .icicle#ice1 {
left: 24%;
top: 0%;
width: 2%;
height: 8%;
}
#background .icicle#ice2 {
left: 26%;
top: 0%;
width: 2%;
height: 16%;
}
#background .icicle#ice3 {
left: 28%;
top: 0%;
width: 2%;
height: 4%;
}
When I attempt to place all three rectangles together, the last rectangle seems to overwrite the previous two. Can you advise me on how to combine them effectively?
<div id="background">
<div class="icicle" id="ice1"></div>
<div class="icicle" id="ice2"></div>
<div class="icicle" id="ice3"></div>
</div>
Is there a way to merge the properties of ice1, ice2, and ice3 without one overriding the other?
#background .icicle#ice1 {
left: 24%;
top: 0%;
width: 2%;
height: 8%;
left: 26%;
top: 0%;
width: 2%;
height: 16%;
/* This one will be displayed as well */
left: 28%;
top: 0%;
width: 2%;
height: 4%;
}