SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Sweden
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div overlapping div?

    This might be simple, but I can't find the right way...

    I have two boxes (divs). One with "float: left" and the other with "float: right".

    I want the "right" to overlap the "left" div. Thought I'd do that with z-index, and set the left/right to 1 and 2, so the right would be on top of the left.

    If you would like, please take a look at this page (again): http://www.tabheaven.com/newTab/artist.php

    The left box is the one with the Letters on the top.
    Now I would like to have the right div (with the text Metallica guitar tabs...) to be wider and overlap the left...

    Is it possible or should I rethinki my css/design?

    Thanks alot,
    Mattias

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You'll have to absolutely or relatively position your elements if you want them to overlap each other.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Sweden
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So it's not possible to do when I have "float: left" for the div and nothing about absolut/relative.

    Is that right?

    //Mattias

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could float the right box inside the left box and then drag it outside using a negative left margin.
    e.g.
    Code:
    #artistbox {
     float: right; width: 100px; border: #000000 1px solid; margin-top: 20px; margin-right:-90px;position:relative;z-index:100;
    }
    Move the artistbox in the html to here:
    Code:
    <a href="letter.php?id=26">Y</a> 
       <a href="letter.php?id=27">Z</a> 
     <div id="artistbox">
     Metallica guitar tabs<br>
     10 guitar tabs<br>
     10 guitar tabs<br>
     </div>
     <br><br>
     Artistnamn<br>
    I'm not sure if that's what you meant but I think you should get the idea.

    (Alternatively you could just place it there like Vinnie said )

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Sweden
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both!
    I'll try it out tomorrow, after som hours of sleep :-)

    Too many projects are flying around in my head right now!

    //Mattias

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by moozer
    Too many projects are flying around in my head right now!
    We're in the same boat

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Sweden
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    We're in the same boat
    Well, it's stupid to complain... Having lots of stuff to do is the best thing for me

    Thanks alot for both the tips, they worked perfectly! Learned One new thing for that day

    Rock on!
    //Mattas


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •