Currently facing a challenge with my HTML/CSS code regarding the horizontal centering of two divs (A, B) within one absolutely positioned div (C) that contains background images.
Key aspects to consider:
- The bottom edge of the larger div (A) should align with the bottom of (C).
- The top edge of (A) needs to match the top edge of (B).
- (B) must be positioned behind (A) - possibly requiring the same
positionproperty for both. - No limit on the number of inner div elements that can be added to the (C) div.
I have made progress in positioning the (A) div inside the (C) container in this fiddle: http://jsfiddle.net/meridius/DGexR/. However, I am struggling to achieve the desired layout.
IMPORTANT:
Here is the intended appearance of the layout
Code snippet:
Refer to the aforementioned fiddle for a working example with background images.
HTML
<div class="desk">
<div class="figure">
<div class="type sprites-sachy sprite-WKing"></div>
<div class="special sprites-sachy sprite-halo"></div>
</div>
</div>
CSS
.desk { /* do not modify this class */
position: absolute;
top: 129px;
left: 202px;
border: 1px solid #FF0000;
width: 65px;
height: 65px;
padding: 0;
float: left;
}
.figure {
bottom: 0;
left: 50%;
position: absolute;
}
.type {
margin-left:-50%;
z-index:2;
}
.special {
border: 1px solid #008000;
z-index:1;
/* display:none; uncomment this to see .figurka centered how it is supposed to */
}
NOTE:
To prevent this question from being flagged as too localized, I want to emphasize that many individuals encounter challenges when positioning and centering elements using CSS.