1

I am trying to create a block of photos on my webpage (Which has a set width, I didn't copy that part of the code over). I have put the code into the JSFiddle link below.

http://jsfiddle.net/T2qHR/12/

I will recreate what I am trying to do on a graphic editor. Click here to view it: http://www.flickr.com/photos/adpartners/6630840127/in/photostream

I'm not sure what I am doing wrong with my css/html. Everything is stuck on the left because I used float left in one of my div tags. I really want the background to be centered, which it is, then have the images over the top of it, like so: 3 photos, 2 photos, 1 photo, 2 photos. They will all link to youtube videos, which I have already got the links already for that part of it.

Any help would be much appreciated. I have done 10-20 different versions of this code with
p, div, table, ol/li tags, and honestly don't know which one to use for this now.

If you see what I am doing wrong, please fill me in. I'm at a loss of code!

Many thanks for any help you might offer, R

user1128730
  • 13
  • 4

1 Answers1

0

Use display: inline-block and text-align: center instead.

div.floatingPic { display: inline-block; padding: 12px; }

div.containerVid { border: 2px solid #99cc99;
                   background-color: #000000;
                   padding: 45px;
                   height: 890px;
                   border-radius: 10px;
                   margin-bottom: 25px;
                   text-align: center; }

As long as .containerVid is wide enough, images will continue to stack up until they no longer fit in the row. If you want to force a break early, simply add a <br /> (as you've been doing).

fiddle: http://jsfiddle.net/T2qHR/20/

benesch
  • 5,239
  • 1
  • 22
  • 36
  • Thank you so much for your helpful comment! It worked magically! You are amazing!!!!!! – user1128730 Jan 04 '12 at 16:57
  • No problem! If you're satisifed, would you mind accepting the answer? (Just click the checkmark outline on the left there.) It gives me a nice little reputation boost. Thanks! :D – benesch Jan 04 '12 at 20:22