Positioning an image either side of page

[Dopple]

I am trying to place an image on the left side and on the right side oif the screen but I'm not having much luck. Can someone tell me where I'm going wrong? The site can be found at www.ufreak.net/new.
Thanks
<div id="leftbar"><p><img src="img/leftside.png" /></p></div>
<div id="rightbar"><p><img src="img/rightside.png" /></p></div>

.leftbar {
position: absolute;
display:inline;
left: 0;
bottom:0;
padding:0;
margin:0;
}
.rightbar {
display:inline;
float:right;
position:absolute;
right:0;
bottom:0;
padding:0;
margin:0;
}

[gil davis]

It may have something to do with when you specify the bars. The document is created top-down, so the "bottom" is wherever the body is when the bars are rendered. If you want them at the bottom, put them at the end of the file. Otherwise, they appear in the order of the file.

<style type="text/css">
.leftbar {
position: absolute;
left: 0px;
botttom: 0px;
border: 1px solid black;
}
.rightbar {
position: absolute;
right: 0px;
botttom: 0px;
border: 1px solid black;
}
</style>
<img class="leftbar" src="redstarf.gif">
<img class="rightbar" src="redstarf.gif">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<img class="leftbar" src="redstarf.gif">
<img class="rightbar" src="redstarf.gif">
See what I mean? the first ones listed are at the top of the document rather than the bottom.

You could use javascript to move them after the page loads, but it is easier to do it by placement in the file.

BTW, without using js or knowing how big the window is, they won't go down to the bottom of the window by themselves.

[ray326]

#leftbar {
float:left;
}
#rightbar {
float:right;
}

You did class selectors then referred to ids.

[Dopple]

You did class selectors then referred to ids.

:o
Whoops.
Thats sorted it. Thanks Ray.
GRaham