Absolute positioned image in liquid layout problem
Site URL
Alright I'm trying to position THIS inside the main layout div, 152px from the top and 65px from the right (or 397px from left). I put this wrapper div:
Code:
<img src="nav.jpg" style="position:absolute;top:152px;left:397px;">
However, whenever I resize the browser, the image moved left and right. It doesn't move up and down if I resize. Just left and right. But I need the image to stay static 397px from the left of that layout, not the page.
I never had this problem before because I never worked with liquid layouts before.
How can I make the image stay in one exact spot even if I resize my browser?
CSS
Code:
body,
html {
margin:0;
padding:0;
background:#000000;
color:#000;
}
body {
min-width:750px;
}
#wrap {
background-image:url(http://fauxism.org/bg.jpg);
margin:0 auto;
width:750px;
font-family: arial narrow;
font-size: 13px;
line-height: 25px;
text-align: justify;
}
#header {
height: 231px;
background-image:url(http://i42.tinypic.com/x1j2fo.jpg);
}
#header h1 {
padding:0px;
margin:0;
}
#nav {
display: none;
background-image:url(http://fauxism.org/bg.jpg);
padding:5px;
}
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
display:inline;
margin:0;
padding:0;
}
#main {
background-image:url(http://fauxism.org/bg.jpg);
float:left;
width:450px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar {
background-image:url(http://fauxism.org/bg.jpg);
float:right;
width:240px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px 0 0;
}
#footer {
height: 225px;
background-image: url(http://i43.tinypic.com/28cmy53.jpg);
clear:both;
}
#footer p {
padding:0px;
margin:0;
}
textarea {
background-color:#EAEAE2;
border-top: #F3F3ED;
border-left: #F3F3ED;
border-right: #B7B3A7;
border-bottom: #B7B3A7;
border-style: solid;
border-width: thin;
padding: 5px;
font-family: arial narrow;
font-size: 13px;
line-height: 25px;
width:100%;
}
input {
background-color:#EAEAE2;
border-top: #F3F3ED;
border-left: #F3F3ED;
border-right: #B7B3A7;
border-bottom: #B7B3A7;
border-style: solid;
border-width: thin;
font-family: arial narrow;
font-size: 13px;
}
HTML Code:
<html>
<head>
<LINK href="http://fauxism.org/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<img src="nav.jpg" style="position:absolute;top:152px;left:397px;">
<div id="header"><h1></h1></div>
<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
...
</ul>
</div>
<div id="main">
Main text here
</div>
<div id="sidebar">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</div>
<div id="footer">
<p></p>
</div>
</div>
</body>
</html>
Thanks in advance.
