Grow your CSS skills. Land your dream job.

Wrap Around Box (div)

  • # May 4, 2011 at 10:25 am

    Hi Guys, first time poster here…

    I have been looking for a clean way to do one of these:
    http://img706.imageshack.us/img706/3645/wraparound.jpg

    Anyone have a good tutorial or some pointers on doing these “wrap around boxes” or what ever they are called.

    thanks.

    # May 4, 2011 at 11:12 am

    Hi zemaker,

    those are div’s you’re looking at, with background images and colours applied to them. they are basically the foundation of any website.

    chris has done a video on css basics here… I haven’t watched it myself so cant say how well he covers what you’re looking for.

    Best practice would be to have a go yourself and if you hit trouble or don’t understand anything, post back in here. We’d be happy to help

    # May 4, 2011 at 6:14 pm

    My fault for being vague…

    Look at the three light blue divs in the image from the first post. They overlap the main content div on the right. Anyone know of a way to achieve this?

    # May 4, 2011 at 7:48 pm

    There are absolutely multiple ways of doing this, but to start with a really basic example, let me direct your attention to this illustration:

    http://content.screencast.com/users/theleggett/folders/Snagit/media/b6577cc8-0dae-41b2-a180-ac65cfb2084a/05.04.2011-19.26.13.png

    One way to think about this is to split it into all the necessary visual pieces to create the effect. When you think about it, there are only two pieces to this style:

    1. The box containing the content.
    2. The graphic that gives (1) an appearance of wrapping around the “main content”.

    Like Fourize said, this is just a matter of choosing the right colors and background images to create this style. You might choose any number of ways to accomplish this, here is one example:

    http://theleggett.com/explanations/wraparound/

    # May 4, 2011 at 8:23 pm

    ha, theleggett, you’ve beaten me to the punch.
    This should be what your looking for…

    # May 4, 2011 at 8:27 pm

    :) Two different solutions, good way to show that there is more than one answer.

    # May 5, 2011 at 9:43 am

    You two rock, thanks.

    # May 5, 2011 at 10:28 am

    Check out this tutorial. :)

    # May 5, 2011 at 2:00 pm

    If you want to get really fancy with it here is a Pure CSS3 example and article.

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

You must be logged in to reply to this topic.

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