View Full Version : positioning div

Dec 10th, 2010, 01:11 AM
I have uploaded a test page with great difficulty onto another site: http://www.puddypaws.co.uk/test/test.html

If you scroll down the page, you will see a gallery but I cannot get it to sit in the middle of the border box along with the mini slides at the side. I also would like a border of 1px solid #CCC and padding: 3px; around the mini slide images but it is not happening. This is a script adapted from CSS Play but maybe I have ruined it now with trying to fix it. I made it with 2 cols of mini slides as the other way using arrows images I could not do, this is my own way. Appreciate any help been struggling over a couple of days now.

Dec 10th, 2010, 01:25 AM
Hello quartzy,
I don't think you want those images centered. Remove the margin:0 auto; for sure, the position:relative; I think means nothing here, remove that as well.
Like this -

#gallery #fullsize div {width:775px; height:550px; padding-top:70px; position:relative;}
#gallery #fullsize div img {
/*margin:0 auto;*/
border:1px solid #eee;

You will need to adjust your left:xx; on your absolute positioned ul that holds your thumbnails.
Try something like this -

#gallery #slides {
/*right:10px; */
left: 545px;

Dec 10th, 2010, 12:06 PM
thanks Ex. I now have them lined up correctly, however I am having problems with lining up the captions at the bottom, if I do text align center they centre to the whole box and not just the large image as I want. Also the mini slides box has a wider margin on the right that I dont want. Can you hlep me? Same url http://www.puddypaws.co.uk/test.test.html As this is supposed to be elastic, I dont really want to add margin or padding to line up the captions.

I have now fixed the captions, but the wider margin at the end of the slides is something I cannot do.


Dec 10th, 2010, 02:19 PM
I've always found it easier to put caption and image in their own div together. They just never line up right otherwise.

See captions here (http://nopeople.com/CSS%20tips/image%20captions/index.html).