Images move out of position when I resize the browser?

Question

The website I'm trying to create has few issues with the positioning of an image. I'm currently using a jQuery called MobilyNotes to have animated images on my index page but when I resize my browser, the image which is positioned in the left side when viewed in full screen mode browser moves towards the right when it is resized. Here's my HTML code:

<div class="wrap">
<div class="notes_img">
                <div class="note">
                    <img src="images/img1.jpg" alt="" />
                </div>
                <div class="note">
                    <img src="images/img2.jpg" alt="" />
                </div>
                <div class="note">
                    <img src="images/img3.jpg" alt="" />
                </div>
                <div class="note">
                    <img src="images/img4.jpg" alt="" />
                </div>
                <div class="note">
                    <img src="images/img5.jpg" alt="" />
                </div>
                </div>

and CSS:

body {
    margin: 0;
    padding: 0;
    text-align: center;
    color: #333333;
    background-color: #ffffff;
    background:url(../images/pattern.png);
    background-repeat:repeat;

    }


#img_1 {
    background: #ffffff url('img_sl/bg_top.jpg') repeat-x;
    height: 102px;
    background-color:transparent;
    }

#img_1 .logo_upr {
    width: 659px;
    text-align: left;
    margin: 0 auto 0;
    }

#img_1 .logo {
    height: 20px;
    padding-top: 155px;
    float: left;
    }

#img_1 .logo_us {
    float: right;
    position: relative; right: 5px;
    }

#img_1 .logo1 {
    margin: 0 15px 6px 0;
    }


#img_2 {
    background: #ffffff url('img_sl/bg_btm.jpg') repeat-x;
    height: 210px;
    background-color:transparent;
    }
#img_2 .logo_jp {
    width: 655px;
    text-align: right;
    margin: 0 auto 0;

    }

#img_2 .logo_jp IMG {
    position: relative; right: 20px;

    }

#content {
width:220px;
margin:200px auto 0;
}

.wrap {
float:right;
clear:both;
width:250px;
margin-top: -270px;
margin-right: 500px;

}

.notes_img {
position:relative;
float:right;
clear:both;
width:200px;
height:200px;
}

.note {
    position: absolute;
    top: 1px;
    left: 2px;
    padding: 10px;
    background: #000;
    border: 1px solid #333;
    width: 200px;
}


ul.listNotes,
ul.listNotes li {
display:block;
list-style:none;
padding:0;
margin:0;
}

a {
color:#fff;
}

a img {
border:none;
}


#mainArea {
    background: #000000;
    height: 332px;
    border-color:#996;
    border:medium;
    }

#imgs {
    width: 655px;
    text-align: left;
    margin: 0 auto 0;
    }

#mainArea .sitename {
    float: left;
    margin-top: 146px;
    margin-left: -100px;
    }

#mainArea .lang {
    float: right;
    margin-top: 140px;

    }

#content {
width:220px;
margin:200px auto 0;
}

.wrap {
float:right;
clear:both;
width:250px;
margin-top: -270px;
margin-right: 500px;

}

.notes_img {
position:relative;
float:right;
clear:both;
width:200px;
height:200px;
}

.note {
position:absolute;
top:0;
left:0;
padding:10px;
background:#000;
border:1px solid #333;
width:200px;
}


ul.listNotes,
ul.listNotes li {
display:block;
list-style:none;
padding:0;
margin:0;
}

a {
color:#fff;
}

a img {
border:none;
}


#mainArea {
    background: #000000;
    height: 332px;
    border-color:#996;
    border:medium;
    }

#imgs {
    width: 655px;
    text-align: left;
    margin: 0 auto 0;
    }

#mainArea .sitename {
    float: left;
    margin-top: 146px;
    margin-left: -100px;
    }

#mainArea .lang {
    float: right;
    margin-top: 140px;

    }

Please help me with the coding, thanks very much in advance.

Answer 1

I think your Problem is the absolute positioning your using on note. By default, absolute positioning takes that div out of the normal flow of page. Try changing to relative and re-position and see if that works.