I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.

http://www.charlestonshop.it/homepageteo.html

    <style type="text/css">
  html, body {
    width:100%;
    height:100%;
    margin:0;
}

div#container {
    height:100%;
}
div#container div {
    width:50%;
    height:100%;
    float:left;
    background-repeat:no-repeat;
    background-size:contain;
}

div#container div#left {
    /* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
    background-position: right;
background-color: black;
}
div#container div#right {
   /* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
    background-position: left;
background-color: white;
}

.charleft img{
        max-width:100% !important;
        height:auto;
        display:block;
    }

    .charright img{
            max-width:100% !important;
            height:auto;
            display:block;
                        float:right;
        }

</style>

Add the below to your css, if you already have rules in place- add the additional styles as outline below:

#left{
  position:relative; /* have a reference point for child positioning */
}

.charleft img{
  position:absolute; /* position absolutely */
  right:0; /* position on the right hand side of the parent, #left */
}

The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.

more