Issue with positioning a frame as relative

The frame in question is the gray one in the middle of and under a single resolution and position:absolute it looks fine, but when I attempt to make it’s position relative, it cause the row to expand. Even when I align it with negative positioning, the rows still expanded. Any help to what Im doing wrong would be greatly appreciated.

Also the JS plugin I’m using is

This background image is part of the presentation, so it should really be in your CSS. If you set it as a background image for the #slidecontainer div, for example, you would be getting closer to something that works. You will have to modify the image and the div padding, etc. to make it work. Something like this got me close, but you will need to tweak it a bit. This is in your “bootstrap.css” file, line 3461:

#slidecontainer {
  width: 600px;
  padding: 10px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  background: url(/wp-content/themes/Starkers/images/example-frame.png) -70px 7px no-repeat;

Of course, remove the example-frame.png image from the HTML.

Using absolute positioning in this case is just the wrong thing to do. Use it sparingly, if at all.

Thanks, that works lovely.