CSS - Css Postioning

i am pretty new to web development, and i have a big problem which i cant seem to find a solution to.. i want to type on top of an image on my web page... the image is placed in a table and the table (the whole tag from <table> to </table> including image) has been relatively placed on the page using div tag. so how do i get around typing something ON TOP OF the image ??? for eg... on the ibm dot com homepage, on the header, on the right side, the text "united states" is placed on top of an image... i want to achieve a similar effect. please help me.. please.
and any recommendation for good positioning tutorials ?
i mean, the only way i am able to make text appear over images is by making a new table seperately, and using div tags and set the position as absolute, and setting the z axis to auto which lets me move the table around anywhere on the page (even on top of images) in dreamweaver...
isnt there any better way of doing it ?
and im sorry if this post belongs to some other area, i think his problem is css related..
im sorry ima complete noob
first time on any web development forum.

here is my code
Code:

<div class="abovefooter">
  <table width="906" height="108" border="0">
    <tr>
      <td><img src="images/above_footer.jpg" width="906" height="108" /></td>
    </tr>
  </table>
  </div>
  <div class="above">
    <p>News Forums extreme</p>
    <p>&nbsp;</p>
  </div>

and here is the "above" and "abovefooter" css code:
Code:

.above {
	position: absolute;
	z-index: auto;
	height: 100px;
	width: 930px;
	left: 13px;
	top: 432px;
	right: auto;
	bottom: auto;
}
.abovefooter {
	position: relative;
	z-index: auto;
	height: auto;
	width: auto;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
}

Ok i made a design for a website in photoshop .. sliced it up into divs put it in dream weaver and i edited to css for the divs there... I'm having a problem with all the columns with background images to stretch to the end of the page dynamically according to the hight of the highest column..

For example if i add more content to the content section of the site i have to go in and change the hight of every repeatable background image that extends to the bottom of the page.... as you may know this sucks and i really want to figure out how to get the site the way it should be so its easily editable.
..

I know quite a bit of the problem is the fixed positioning that's being used but the website is not a perfectly square site so some exception need to be made.. i tried to make a website that was way above my lvl to make but i made it.. its just has some bugs i need to figure out..

To get the problem to occur all one has to do is make the text bigger using the browser and watch the background image not extend to the end of the site.. which is all i need to happen ... so if i add or subtract content the site auto adjusts to the size.. really need some help on this.. thanks..

I have a blog found here buildingsolutionsmidlandsltd.co.uk/blog/

The left menu is the issue. In firefox its perfect, but in ie7 its not aligned right.

Please help, im tearing my hair out.

/* Template */
#content{
float:right;
width:75%;
}

#menu{
float:left;
width:20%;
}

/* Footer */
.footer{
background-color:#CCCCCC;
height:22px;
margin:auto auto 10px;
padding-left:10px;
padding-top:8px;
width:890px;
clear:both;
}

.footerlist {
font-size:10px;
}

Hi

I'm trying to figure out how to postion an Image at the bottom left of a <DIV> container.

Can someone supply an example style class defintion which will place an Image at the bottom left of the div container..

I presently have:

<div>
<h2>Heading 2</h2>
<p>My paragraph text goes here and goes on for a line or so</p>
<img class="bottomleft" src="button.gif" alt="button" />
</div>

.bottomleft {
position: relative;
bottom: 0px
left: 0px
}

But this places the Image relative to the end of the <p> tag not relative to the <div>

How can I position the Image relative to the botom left of <div> tag?

Thanks
David