How can I place an image right next to the mainWrapper?

How can I place an image right next to the mainWrapper without using <div>?
I centered the mainWrapper and would now like to place an image right next to the edge on the outside of the wrapper. The image must be able to stay at the same place regardless of if the user re-sizes or scrolls the window, so I guess I would need to just insert it in /www/www/includes/templates/my_template/common/tpl_main_page.php but how and where exactly?? :lookaroun

Unless you use a background image, you will need a div or some container for an image. Locating an element next to the #mainWrapper will make it impossible for #mainWrapper to auto-center.

What you might do is add a div just after the #mainWrapper div opening, give it an id like "sideImage", and in the stylesheet add
position:relative;
to #mainWrapper, and a new rule like
#sideImage {position: absolute; top: 123px; left: -123px;}
which will keep the image from occupying space in the layout and make it sit next to #mainWrapper.

gjh42:

Unless you use a background image, you will need a div or some container for an image. Locating an element next to the #mainWrapper will make it impossible for #mainWrapper to auto-center.

What you might do is add a div just after the #mainWrapper div opening, give it an id like "sideImage", and in the stylesheet add
position:relative;
to #mainWrapper, and a new rule like
#sideImage {position: absolute; top: 123px; left: -123px;}
which will keep the image from occupying space in the layout and make it sit next to #mainWrapper.

Amazing! Thanks a lot. That was exactly what I needed! :clap: