Sliding a floated div under another floated div

**nichemtktg** · Jun 25, 2011 14:55

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

**svcghost** · Jun 25, 2011 15:25

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.

**nichemtktg** · Jun 25, 2011 16:36

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.

User Tag List

Thread: Sliding a floated div under another floated div

Thread Tools

Display

Sliding a floated div under another floated div

Bookmarks

Bookmarks

Posting Permissions