Positioning Text Around Image

[OtagoHarbour]

I would like to position one short piece of text (a number) just to the right of the top right hand corner of an image and another short piece of text (a number) just to the right of the bottom right hand corner of the image so it looks like this.-------------------------------------------------|...........................................................| 100.0|...........................................................||...........................................................||...........................................................||...........................................................||...........................................................||...........................................................||...........................................................| 20.0-------------------------------------------------I would also like to have two action buttons, one under the other, just to the left of the top left hand corner of the image.What would be the best way to do this?Thanks very much,Peter.

[dsonesuk]

Probably in this case, by using position absolute and relative .

<style type="text/css">#wrapper { width: 960px; margin:0 auto; height:600px; background-color:#CCCCFF; }.image_container {position:relative; margin: 0 90px;}.image_container button {display:block;}.image_container p{margin: 0.05em 0px 0.05em 10px; }.top_left { width:80px; left:-80px;position:absolute;}.top_rgt, .bottom_lft { width: 120px; right:-120px; position:absolute;}.top_rgt, .top_left { top:0;}.bottom_lft {bottom:0;}.right {float:right;}.left {float:left;}</style>

<div id="wrapper"><div class="image_container left"><div class="top_left"><button>button 1</button><button>button 2</button></div><div class="top_rgt"><p>top text</p></div><img src="../images/myimage.jpg" /><div class="bottom_lft"><p>Bottom text</p></div></div><div class="image_container right"><div class="top_left"><button>button 1</button><button>button 2</button></div><div class="top_rgt"><p>top text</p></div><img src="../images/myimage.jpg" /><div class="bottom_lft"><p>Bottom text</p></div></div></div>

[OtagoHarbour]

Probably in this case, by using position absolute and relative .

<style type="text/css">#wrapper { width: 960px; margin:0 auto; height:600px; background-color:#CCCCFF; }.image_container {position:relative; margin: 0 90px;}.image_container button {display:block;}.image_container p{margin: 0.05em 0px 0.05em 10px; }.top_left { width:80px; left:-80px;position:absolute;}.top_rgt, .bottom_lft { width: 120px; right:-120px; position:absolute;}.top_rgt, .top_left { top:0;}.bottom_lft {bottom:0;}.right {float:right;}.left {float:left;}</style>

<div id="wrapper"><div class="image_container left"><div class="top_left"><button>button 1</button><button>button 2</button></div><div class="top_rgt"><p>top text</p></div><img src="../images/myimage.jpg" /><div class="bottom_lft"><p>Bottom text</p></div></div><div class="image_container right"><div class="top_left"><button>button 1</button><button>button 2</button></div><div class="top_rgt"><p>top text</p></div><img src="../images/myimage.jpg" /><div class="bottom_lft"><p>Bottom text</p></div></div></div>

That works great! Thank you so much for your help.Peter.