Grow your CSS skills. Land your dream job.

Best way to position design elements outside the container

  • # December 19, 2012 at 9:50 am

    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 :)

    # December 19, 2012 at 10:22 am

    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.

    # December 20, 2012 at 3:59 am

    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 :)

    # December 20, 2012 at 4:57 am

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".