I'm trying to get an image to stay fixed even after the window is resized but it drifts off to the right and you end up seeing a black space. If you start to drag the window size to the left than you can slowly see the image start to come back into view. Any ideas how to solve this problem?
CSS:
@charset "utf-8";
body, html{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background:#000;
margin:0;
padding:0;
color:#000;
text-align:center;
}
.container{
text-align:left;
width:1100px;
margin:auto;
overflow:hidden;
}
.sidebar1 {
position:relative;
display:table-cell;
width: 200px;
background: #000;
overflow:hidden;
padding-bottom: 10px;
}
.content {
position:relative;
background:#FFFFFF;
padding: 10px 15px;
width: 670px;
overflow:hidden;
display:table-cell;
}
.sidebar2 {
overflow:hidden;
position:relative;
display:table-cell;
width: 200px;
padding: 10px 0;
}
.sidebar2 .img{
bottom:0;
position:absolute;
z-index:9999;
}
.fltrt{
float: right;
margin-left: 8px;
}
.fltlft{
float: left;
margin-right: 8px;
}
.clearfloat{
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
HTML:
<!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>Model Offers Now</title>
<link rel="stylesheet" type="text/css" media="screen" href="ext/style.css">
</head>
<body>
<div class="container">
<div class="sidebar1">
</div>
<div class="content">
<p>
<b style="font-size:14px">Model Offers Now</b> presents you to the right executive Producers and Publishers based on your profile and answers below.
</p>
<p>
<fieldset style="border-color:#FF0000;">
<legend style="top:-10px;position:relative;"><img src="images/warning-icon.png" style="width:48px;height:40px;"> BEWARE</legend>
Modeling and Talent representatives should never be paid by you to initiate this process. There is no cost or obligation to use this and/or our service.
</fieldset>
</p>
<p>
<fieldset>
<legend>Requied</legend>
</fieldset>
</p><p>
<fieldset>
<legend>Optional</legend>
</fieldset>
</p>
</div>
<div class="sidebar2">
<img src="images/6.png" class="img">
</div>
</div>
</body>
</html>