Absolute positioned image in liquid layout problem

**exposé** · 01-28-2009, 08:37 PM

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.

**Snookerman** · 01-28-2009, 08:55 PM

You need to position the wrapping div:

Code:

#wrap {
background-image:url(http://fauxism.org/bg.jpg);
font-family:arial narrow;
font-size:13px;
line-height:25px;
margin:0 auto;
text-align:justify;
width:750px;
position: relative;
}

Good luck!

**exposé** · 01-28-2009, 10:44 PM

Funny, I had tried that earlier and it didn't work. But now it does. Thank you

**Snookerman** · 01-29-2009, 05:46 AM

You're welcome, glad to help! You can go to your first post in this thread, click

then click Go Advanced and add the Resolved prefix to the thread title. This will let other users know the problem has been solved.

Good luck with your site!

Thread: Absolute positioned image in liquid layout problem

Thread Tools

Search Thread

Absolute positioned image in liquid layout problem

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions