CSS how to position image in bottem right as 'corner'

[cs.punk]

Please take a look at attached image.. I would like to position the image in the bottom right to act as a 'corner'. But having some trouble.

 

 

Index.php

... ... ...
</div>

<div class="corner">
<img src="images/corner.png" />
</div>

<div class='bottom-bar'></div>

<div class="corner-r">
<img src="images/corner-br.png" />
</div>

 

css.css

.bottom-bar {
height: 60px;
margin-right: 160px;
margin-left: 460px;
background: url(/images/corner_bg.png);
background-repeat:repeat-x;

}

div.corner {
margin-left: 340px;
float: left;
}

div.corner-r {
margin-left: 25px;
float: left;
}

div.mainpage {
margin: 0px;
margin-left: 0px;
margin-right: 25px;
margin-top: 25px;
padding: 5px;
border: 5px #4033FF solid;
background-color: #B0D2FD;
overflow: hidden;

}

// Navigation block
div.sidebar {
margin: 30px;
margin-right: 0px;
padding: 5px;
padding-left: 0px;
border: none;
float: left;
overflow: auto;
text-align: left;
}

 

 

Any ideas?

 

[attachment deleted by admin]

[RussellReal]

right: 0; bottom: 0; position: relative; or you might want to put position to fixed.

[cs.punk]

Er that doesnt really work.. I can manually position it but then when ever the page increases in height (from more content) it gets out of line again... Anyone got any idea?

[RussellReal]

if its not meant to be inside of a div, set it to fixed.. Position: fixed; left: 100%; top: 100%; either way.. or right: 0; bottom: 0; either way thats the way you'd do it..