How can I push an image that is floated right to the bottom of the browser window?

Question

I have an image in my website that is defined with the following CSS:

#settings_big{
    border: none !important;
    margin: auto 0 0 0 !important;
    padding: 0 !important;
    float: right;
}

Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of

bottom: 0;
right: 0;

causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the

float: right;

positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.

Answer 1

New answer:

<div class="container contentCont">
  <div id="content"></div>
</div>
<div class="container imageCont">
  <div id="image"></div>
</div>

With CSS:

.container {
  width: 200px;
  margin: 0 auto;
  background: #ccc;
}

.contentCont {
  min-height: 600px;
}

.imageCont {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
}

#image {
  float: right;
  width: 20px;
  height: 20px;
  border: 4px solid red;
}

Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/

Answer 2

The following might be close to what you need.

Assuming that your page layout vaguely looks like the following HTML:

<div class="wrapper">
    <p>some words...</p>
    <div class="slot">
        <img src="http://placehold.it/200x200">
    </div>
</div>

apply the following CSS:

.wrapper {
    width: 600px;
    height: 600px; /* for demo only, not critical... */
    margin: 0 auto;
    border: 1px solid blue;
}
.slot {
    text-align: right;
    position: fixed;
    left: 50%;
    bottom: 0;
    margin-left: -301px;
    width: 600px;
    border: 1px dotted blue;
}
.wrapper img {
    vertical-align: top;
}

See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/

If you don't know the width of the image (or you don't want to specify it), create a wrapper that matches the width of the parent element and apply position: fixed to it.

The image can then be either floated or text-aligned to the right within the fixed block.

The fixed block can then be positioned to the left and bottom, and using margin-left to keep it centered.