Best way to position design elements outside the container

[Argeaux]

Hi guys,

I am turning a design into an actual webpage at the moment. The whole site is centered and the content fits in a wrapper of 960px. There are a few design elements which are outside the 960px wrapper, no content in them, just images.

What is the best way to place these design elements just outside the wrapper with background images so i don’t get a vertical scrollbar?

See my example:

Most content is like the red box, but left and right of the blue box i want to add some images without getting the vertical scroll too soon.

http://jsfiddle.net/zChSU/4/
(i reduced the wrapper to 320 instead of 960 in the example)

Hope you can help me :)

[theCSSguru]

I took your code and modified it a little – it sounds like you can take advantage of the `.wrapper` and segment it – thusly adding an image via a background if you needed.

http://codepen.io/JeremiahNeedsHelp/pen/hekoE

Alternatively you could use :before and :after but it wouldn’t prevent the horizontal scroll bar once you’re are 960px – though there’s a `@media` query trick you could do and size it for 960px to 1200px and add `html { overflow-x: hidden; }` – it’s eh.

[Argeaux]

Thanks, i was also thinking of this. Don’t like the extra markup for wrapping almost anything but seems like the correct way to go.

Thanks for making the example :)

[Andy Howells]

You could just use position: relative; and then give it left/right parameters.

[Author]

Posts