I want to position something, but don't know how

I would very much like this:

http://i183.photobucket.com/albums/x103/Doctor_Varney/scrnshot006.jpg

To look like this:

http://i183.photobucket.com/albums/x103/Doctor_Varney/scrnshot007.jpg

And here is my code (which is so far written in the needlessly obfuscate and infuriatingly unintuitive language, known as CSS... but hey, what choice do I have?) Salient code area is highlighted:


HTML
<div id="gallery">
<div id="compound">
<img class="p1"
src="../assets/events/evp001.jpg"
alt="#"
/>
<img class="p2"
src="../assets/events/evp002.jpg"
alt="#"
/>
<img class="p3"
src="../assets/events/evp003.jpg"
alt="#"
/>
<p>
Ipsum lorem dopsa et manin
blagaurim sent wonkerblurb.
Ipsum lorem dopsa et manin
blagaurim sent wonkerblurb.
Ipsum lorem dopsa et manin
blagaurim sent wonkerblurb.
Ipsum lorem dopsa et manin
blagaurim sent wonkerblurb.
</p>
<img class="p4"
src="../assets/events/evp004.jpg"
alt="#"
/>
<img class="p5"
src="../assets/events/evp005.jpg"
alt="#"
/>
<img class="p6"
src="../assets/events/evp006.jpg"
alt="#"
/>
<p>
Ipsum lorem dopsa et manin
blagaurim sent wonkerblurb.
Ipsum lorem dopsa et manin
blagaurim sent wonkerblurb.
Ipsum lorem dopsa et manin
blagaurim sent wonkerblurb.
Ipsum lorem dopsa et manin
blagaurim sent wonkerblurb.
</p>
</div>
<p class="p7">
<img
src="../assets/events/evp007.jpg"
alt="#"
/>
Ipsum lorem dopsa et manin
blagaurim sent wonkerblurb.
</p>
<p class="p8">
<img
src="../assets/events/evp008.jpg"
alt="#"
/>
Ipsum lorem dopsa et manin
blagaurim sent wonkerblurb.
</p>
<p class="p9">
<img
src="../assets/events/evp009.jpg"
alt="#"
/>
Ipsum lorem dopsa et manin
blagaurim sent wonkerblurb.
</p>
<h1>
Coming up...
</h1>
<p class="j">
Our first Whitby Gothic weekend
lab will be held at The Resolution
Hotel, Skinner St, Whitby. Our lab
will be loosley based around a
celebration of the works of the
great Hollywood monster makers, Dick
Smith, Rob Bottin, Stan Winston, Steve
Johnson, Tom Savini and many others.
The precise subject or ‘monster pick’
for the WGW lab is yet to be decided
and we welcome any suggestions from
you on this. Please read our news section,
for more details.
</p>
<img class="p10"
src="../assets/events/rez001.jpg"
alt="#"
/>
<p class="j">
During this lab, we will be collecting
for the Sophie Lancaster memorial bench
appeal. There will be no admission fee,
but we hope you will be able to make a
donation, towards this cause. More
details are to be found in our news
section.
</p>
</div>

CSS
/*******************
Gallery Settings
********************/
#gallery{padding:2em 0 100px 0}
#gallery p{font-size:0.8em;float:left;margin:1em 0 1em 0}
#gallery img{display:block;margin:0 0 1em 0}
#gallery h1{text-align:center;color:#ccc;margin:2em 0 0 0}
#compound p{text-align:justify}
#compound img{float:left}
/*#fmfxl{width:200px;height:203px;background:url(../assets/events/wgw_bh_logo.jpg) no-repeat scroll top} */

#test .p1{margin:0 0 0 0}
#test .p2{margin:0 0 0 3px}
#test .p3{margin:0 0 0 3px;clear:right}

#test .p4{margin:0 0 0 0}
#test .p5{margin:0 0 0 42px}
#test .p6{margin:0 0 0 42px;clear:right}

#test .p7{width:140px;margin:40px 0 0 0}
#test .p8{width:174px;margin:0 0 0 32px}
#test .p9{width:134px;margin:24px 0 0 31px;clear:right}

#test .p10{float:left;}
#test .p11{font-size:1em;text-align:center}



As you'll deduce, #compound is my ID for a "compound row" of images, which break the flow, block, inline, floating, clearing, oh god, whatever...(I feel sick). You know what I mean.

So does anyone have any ideas how I can possibly position that image and that text into the page, please?

I have tried many, many things, but again and again, the result is, as usual, with my understanding of CCS, a complete mess. Now I'm fresh out of inspiration. Can anyone please help...?

Many thanks,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

Is that a single image?

Is that a single image?

Ah, no... The image, (which includes the words "at the") and the white H1, are seperate elements. I originally had this styled as a bg img in a div, with the H1 over the top.

Trouble is now, I'm having a LOT of trouble, positioning this div, within the latest version of this page.

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

Trouble is now, I'm having a LOT of trouble, positioning this div, within the latest version of this page.
But our trouble is in visualising your page along with its markup and screen shots.
A live link always enable us to edit the HTML and CSS by tools like firebug or CSSvista and test it in live. So I'd recommend you to upload your page or at least a sample page(with some sample image, having the same dimensions as that of your original) to your host or a free host like freehostia.

Come on.. let's save our valuable time by explaining the layout in words :thumbsup:

Come on.. let's save our valuable time by explaining the layout in words :thumbsup:

Good advice, Abdura. I'll make a plan of it. :thumbsup:

A live link always enable us to edit the HTML and CSS by tools like firebug or CSSvista and test it in live.

I didn't know you could do that... Excellent!

Well, I have one more thing to try...

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

I have managed to fix it. By closing the last div and opening up another, with a fresh set of rules, I could reset the display mode and re-float images. The "Free Monster" graphic was literally behind the picture of the hotel, all the time!

Thanks for looking,
http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

Very slippery, these Free Monsters.:D

Frank:eek:

It's funny... Sometimes, don't you find, just by posting a question, then reading it through afterwards, makes it easier to root out the troubles? Must be the thought process involved in compiling the question, but I saw the answer, by the time I'd read it back to myself, a few times.

Very slippery, these Free Monsters.:D

Frank:eek:

Indeed. Even worse, if a hairy one gets out...