SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Sliding a floated div under another floated div

    The div holding the truck is already against the div holding the barcode. I'd like to add to the left margin and have the truck div slide under the barcode div while maintaining the barcode div's current position and float attribute. Is that even possible using float? If so, which attribute should I use?

    http://www.lincolnsrealdeals.com/acrobat7c3.php

  2. #2
    SitePoint Addict svcghost's Avatar
    Join Date
    Oct 2010
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    div.up6_leftTop
    {
    width:298px;
    height:237px;
    margin:0px 0px 0px 0px;
    padding:0px;
    border:4px solid gray;
    border-style:dashed none none dashed;
    float:left;
    }
    </style>
    </head>
    
    <body>
    <div class="up6_leftTop"><div style="background-color:BurlyWood;height:237px;width:298px;"><div style="position:absolute;z-index:0;float:left;margin-left:55px;width:193px;height:80px;overflow:hidden;"><img style="margin: -30px 0px 0px -18px; width: 120%;" src="acrobat7c3.php_files/LAMS-IT3843-110609-120609-84.JPG" alt="some_text"></div><div style="position:relative;z-index:5;float:right;width:100px;height:80px;text-align:center;"><img style="width: 60%;" src="acrobat7c3.php_files/tr2.jpg" alt="some_text"><h6 style="margin:0px;position:relative;top:-3px;">123</h6></div></div></div>		
     
    
    
    
    
    </body></html>
    Make use of the z-index attribute. Make the left div is set to position absolute. Make the right div have a higher z-index than the left div, and make it position relative. Then change the margin to your preference.

    I made the changes in red text in the above code.

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    I also learned that I needed to get the right and left margins to compensate for each other.

    For example, the layout is designed for the truck div with a left margin of 0px 0px 0px 5px. So, if I want the truck div to move 10px into the barcode's space stetting the margins to 0px -10px 0px 15px does the job.


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
  •