how do i get right banner image to slide under left image.

Hi all,

Ok, i have a banner made up of two cells in a table. I want the left image to stay put without collapsing while the right image either slides behind the left image or gets left truncated when you squish the browser. I also can't get rid of the white space i get each image. The left image has white space on right and right image has white space on left.

Here is the code but i can't get it to work right.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type"text/css">
#banner {
background-image:url(images/bg-masthead-left.jpg);
background-position:left;
background-repeat:no-repeat;
margin: 0px;
padding: 0px;
height: 182px;
}

#search {
background-image:url(images/bg-masthead-right.jpg);
background-position:right;
background-repeat:no-repeat;
margin: 0px;
padding: 0px;
height: 182px;
}

</style>

<body>

 <table width="100%">
  <tr>
   <td id="banner"></td>
   <td id="search"></td>
  </tr>
 </table>

</body>
</html>

how do i get right banner image to slide under left image.

nelsonm

nelsonm

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week