Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    11
    Rep Power
    0

    Overlapping boxes w/ CSS


    How can I make three boxes overlap like in my included image?
    Boxes 2 and 3 would grow vertically as content increased, but they would have to overlap Box 1.
    Attached Images
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    11
    Rep Power
    0
    BTW, I will be using this as a blogger template, so I will be sticking a bit of code into Boxes 2 and 3, so they have to be able to expand and move depending on content.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    14
    CSS will provide the solution I think you are after..

    See the attached files for an example.

    Can explain it if you need me to:

    Forgot to add, I only tested in IE
    Attached Files
    Last edited by Phil_work; September 19th, 2003 at 01:30 AM.
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    11
    Rep Power
    0
    Thanks.
    That worked.
    The key, as you pointed out, was to put boxes 2 and 3 inside an absolute-placed container!
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    If you wish box 1's text to wrap, float (from within box 1) box's 2 & 3. To get the overlap, use something similar to this;
    Code:
    .sidebox {position: relative;
            float: right;
            right: 50px;
            width: 175px;}
    
    
     <span class="sidebox">blah, blah,etc. </span>
    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    england
    Posts
    11
    Rep Power
    0
    sorry im, not sure at all im currently trying to do exactly the same thing lol tryingt o make a weblayout
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    11
    Rep Power
    0
    This is how I did it.
    This is a prototype version of my blog.

    Click here...
  14. #8
  15. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    england
    Posts
    11
    Rep Power
    0
    lol iots good but i dont under stand where you have used the codes sorry, i took that code that that guy gave you but i couldnt get it to work! =(
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    14
    What part is not working for you Kassie?
  18. #10
  19. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    11
    Rep Power
    0
    Oops...my bad.
    The url in my last message was not the one I wanted to show you. It's a slghtly different one.
    I had 100% success with the posted zip file.
    I hope you can figure out the problem.
  20. #11
  21. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    england
    Posts
    11
    Rep Power
    0
    none of it will work, all i want is a weblayout with two boxes, one box slightly verlapping the other one lol and the other with a picture of jackie chan in which i have enclosed,Thanx
    Attached Images
  22. #12
  23. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    england
    Posts
    11
    Rep Power
    0
    bruce, do u have the correct url please?
  24. #13
  25. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    england
    Posts
    11
    Rep Power
    0
    testing cookies
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    14
    Originally posted by kassie
    none of it will work, all i want is a weblayout with two boxes, one box slightly verlapping the other one lol and the other with a picture of jackie chan in which i have enclosed,Thanx
    Hey that should be easy enough to achieve using the code that I posted above, just edit the HTML and CSS files.

    If you have given it a go post the code and I can take a look.
  28. #15
  29. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    england
    Posts
    11
    Rep Power
    0
    Lol, okay ill try but i dont get it at all, nevermind, ive tried on frontpage but im a html girl myself, and know hardly any!eeeek
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo