Relative position move left causing content to stay right

Question

I am attempting to get rid of the gap caused when moving a left-floated div to the left by using negative offset.

Site in question:

http://www.imvu-e.com/services/hov/index_wip.php?avatar22=191;741328;2145830;3414888;4683846;5542063;6041125;6698072;8508954;11856954;13682868;14965631;20383310;21560759;22275311;22351471;22697202;25083685;30621584;30678733;31548266

The pic class

.pic {
    float: left;
    width: 175px;
    height: 750px;
    margin-right: 22px;
    position: relative;
    left: -191px;
}

This is how I am moving the picture to the left, and I want the content on the right (Clothes, Avatar & Skin, and Head & Face) to be left aligned; similar to how accessories is positioned.

I want to avoid just moving them to the left using the same process.

Answer 1

Hi now define your id #avatar_products position: relative; and your class .pic position: absolute;left: -192px;

as like this

#avatar_products{position: relative;}
.pic{    position: absolute;left: -192px;}

than result is this

Answer 2

Because your website is not responsive and doesn't resize/move, you can position the pic/guy absolute which removes the element from the pages flow and fixes your problem.

CSS:

.pic {
    float: left;
    height: 750px;
    left: 497px;
    margin-right: 22px;
    position: absolute;
    width: 175px;
}

Answer 3

I think you just replace your div having the class pic from the current place and put just under the menu. Then remove the left property from the class pic and also change the position to absoute . After that you just adjust the top position only.