Looking at the HTML provided, I have two requirements:
Request: I need to center the green boxes regardless of their height, without having to adjust the top:-10px/bottom:-10px values when the height changes.
- Eliminate the fixed
top/bottomvalue (as the height of the green box may vary). I attempted to use various options involving top/margin-top-50%with no success. - Achieve horizontal alignment for my green boxes - due to their absolute positioning, this has been a challenge for me.
The solution should be functional in current versions of Firefox and Chrome, and I am open to utilizing CSS3 & HTML5.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="height: 400px; width: 30px; border: 1px solid #ccc; margin: 50px auto auto 50px;">
<table style="table-layout: fixed; border-collapse: collapse; height: 100%; width: 100%;">
<tr>
<td style="height: 50%;">
<div style="height: 100%; width: 100%; position: relative;">
<div style="top: -10px; border: 1px solid #ccc; background-color: Green; position: absolute; ">A</div>
<div style="bottom: -10px; border: 1px solid #ccc; background-color: Green; position: absolute;">B</div>
</div>
</td>
</tr>
<tr>
<td style="height: 50%;">
<div style="height: 100%; width: 100%; position: relative;">
<div style="bottom: -10px; border: 1px solid #ccc; background-color: Green; position: absolute;">C</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>