Have an image stick out of footer - css

Question

I am working on a project for a class and have an issue.
The site can be found here: http://ispace.ci.fsu.edu/~seb10/cgs2821/proj10
What I have now is a div that I have positioned towards the bottom using inline styling in the HTML and a div.
It appears fine right now, but of course that depends on the browser that is being used.
I would like that image to always appear at the bottom without having to use inline styling. Essentially, I would like it to stick out of the footer, but not have anything else be affected or moved.
What would be the process to do this, if it is possible?
Here's a link to the CSS: http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/style.css
Thank you very much for the help in advance.

Answer 1

I assume that the oil well tower image is the one to be positioned. I would create a .png file with a transparent background and then set it as background image to the .container element.
The .png transparency will allow the other background motif to show through in the open spaces (transparent) sections of your vector image.
This works fine as long as your footer elements flows right after your container element.

Answer 2

The key is place the image with position absolute. I have moved the mast illustration to the footer: http://jsfiddle.net/David_Knowles/98PLA/
Does this solve your problem?
#footer .container {overflow: visible;} /* use a different technique to wrap floated elements so you can place image in the footer and have it stick out - see underneath */
.fltright {position: absolute; bottom: 56px; right: 0;}
/* For modern browsers */
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
/* For IE 6-7 (trigger hasLayout) */
.container {
zoom:1;
}
<div id="footer">
<!-- Begin Container -->
<div class="container">
<img class="fltright" src='http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/images/derrick.png' alt="derrick" width="300"/>
<h1>Copyright © 2013 <br />All Rights Reserved</h1>
<h3>Webmaster |Site Map | About</h3>
</div>
<!-- End Container -->
</div>
<!-- End Footer -->

Answer 3

To make an image ignore it's parent element, a combination of positioning and z-index can be used:
position: absolute;
z-index: 2;
You can also try playing around with the display and overflow properties depending on exactly what you want it to look like.

Answer 4

When I looked at your code, I came up with these css values to absolutely align your .sidebar on your page. You had position: relative; to position it, however, it moves relative to how the large the window is and the surrounding elements. This is why it was probably moving around. However, position: absolute; does not consider surrounding elements and therefore will stay put.
.sidebar {
position: absolute;
top: 233px;
right: 10px;
}