Click to See Complete Forum and Search --> : negative position an image


riskmod
06-04-2008, 05:13 PM
ok I have a page center using a wrapper so the page is centered:

http://www.icgd.net/vgm/

.....what I want to do is have an small image float outside (in the gray) the center div/page and if it expands it follows the center div(main page).....how can you do that? I tried negative positioning with floating but to no avail.

WebJoel
06-04-2008, 07:10 PM
The 'parent container' is "position:relative;" and the image inside of is "position:negative; left:-foopx; top:foopx;" whereby "foo" is the amount of position, esp. the 'negative positioning' which moves this 'out of the document flow' object 'out of the parent container'.

A valid !doctype, and this, works nicely:

<div style="width:550px; height:460px; border:3px double black; background-color:silver; margin:10px auto; padding:20px 20px 20px 50px; position:relative;">

<p>This is the main contant container</p>

<img alt="one" src="#" style="width:100px; height:200px; position:absolute; left:-85px; top:25px; background-color:red;" />
<img alt="two" src="#" style="width:150px; height:200px; position:absolute; left:-45px; top:65px; background-color:wheat;" />
<img alt="three" src="#" style="width:150px; height:300px; position:absolute; left:-65px; top:145px; background-color:yellow;" />


</div>

riskmod
06-04-2008, 08:06 PM
sweet thanks I'll give that a try

WebJoel
06-05-2008, 07:58 AM
"The joy of music expands beyond you're normal genre"
-Me A contraction of "you are". You want the word "your". :)

riskmod
06-05-2008, 09:38 AM
ha nice! I'm not even halfway done with this site...thanks!