Here is the code I am working with:
#div1 {
position: relative;
width:800px;
height:540px;
top: 50%;
left: 50%;
margin-top: -270px;
margin-left: -400px;
}
#div2 {
position:absolute;
left:69px;
top:223px;
width:250px;
height:144px;
}
#div3 {
width:100%;
text-align:center;
position:absolute;
bottom:0px;
}
<div id="div1">
<div id="div2">
Message top.
<div id="div3">
Message bottom!
</div
</div>
</div>
div1 centers a box on the browser window successfully across all browsers.
div2 correctly places a box inside div1 without any issues in different browsers.
div3 should display a message inside div2, aligned at the bottom and centered. However, there seems to be an issue with IE8 as it centers div3 based on the window size, unlike Chrome and Firefox which center it inside div2.
Adding a border to div3 results in div2's width being consistent across all browsers, but it still centers on the window in IE8.
What changes can I make to correct this alignment issue?
Thank you for your help.