Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Wrap Around Box (div)

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #32593
    zemaker
    Participant

    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.

    #47309
    zemaker
    Participant

    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?

    #47301
    TheLeggett
    Member

    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/

    #47277
    TheLeggett
    Member

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

    #47098
    zemaker
    Participant

    You two rock, thanks.

    #47068
    Josh
    Member

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.