I've encountered an issue with the code below and I'm not sure what I'm doing wrong. It seems to work in Dreamweaver, although not in live view, but it sticks to the top and left in Safari and Firefox.
I attempted replacing the masthead div with a table containing a tr/td and using vertical-align: bottom without success. My main goal is to learn how to position the inner (absolutely positioned) div at the bottom of the outer (relatively positioned) div.
You can check out the current site with hotspots by visiting to better understand what I'm trying to achieve. I want to position the 3 objects 15% from the bottom and 45% from the left of their container instead of relying on Dreamweaver's hotspot feature over a flattened masthead image. I know this question has been asked before, but none of the solutions provided have worked for me so I decided to create a new thread.
CSS:
#3_objects_finally {
left: 45%;
position: absolute;
width: 286px;
bottom: 15%;
list-style-type: none;
display: inline;
}
#masthead_test {
height: 132px;
width: 1021px;
background-image: url(images/new_masthead.gif);
position: relative;
}
HTML:
<div id="masthead_test">
<div id="3_objects_finally">
<ul>
<li><img src="images/websites_button_new.gif" width="286" height="31" /></li>
<li><img src="images/mobile_button_new.gif" width="286" height="31" /></li>
<li><img src="images/SEO_new_button.gif" width="286" height="31" /></li>
</ul>
</div>
</div>