Image not overflowing in html page - html

Question

I would like to know if it's possibile to trasform a web page like this:
to this:
?
Some code used, under development, to obtain first image:
/** CSS **/
div.Testata35, div.Testata25, div.Testata70Inner, div.Testata29Inner, div.Testata15Inner {
background-color: #C0C0C0;
float: left;
}
div.Testata35, div.Testata25 {
margin-bottom: 0.2%;
margin-right: 1%;
margin-top: 0.2%;
padding-bottom: 0.2%;
padding-left: 1%;
padding-top: 0.2%;
}
div.Testata35 {
width: 35.5%;
}
div.Testata25 {
width: 23%;
}
div.Valore35, div.Valore25 {
float: left;
margin-top: 0.2%;
overflow: auto;
padding-bottom: 0.2%;
padding-left: 1%;
padding-top: 0.2%;
}
div.Valore35 {
margin-right: 2.5%;
width: 34%;
}
div.Valore25 {
margin-right: 1%;
width: 23%;
}
<!-- HTML -->
<div class="ClrOvFlw">
<div class="PrimaSx">
<div class="ClrOvFlw">
<div id="T1" class="Testata35">Modello</div>
<div id="T1A" class="Testata35">Linea</div>
<div id="T2" class="Testata25A">
<div style="clear: left; float: left; width: 70%;">Standard</div>
<div style="clear: right; float: right; width: 20%; z-index: 1; overflow: auto;">
<img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa">
</div>
</div>
<div class="ClrOvFlw">
<div id="V1" class="Valore35">BELLARIA</div>
<div id="V1A" class="Valore35">MODULAR</div>
<div id="V2" class="Valore25A">EN ISO 20345:2011</div>
</div>
</div>
<div class="Valore25B">
</div>
</div>
<div class="ClrOvFlw">
<div id="T3" class="Testata35">Codice Articolo</div>
<div id="T4" class="Testata35">Protezione</div>
<div id="T5" class="Testata25">Disponibilità a Magazzino</div>
</div>
<div class="ClrOvFlw">
<div id="V3" class="Valore35">83297-07LL</div>
<div id="V4" class="Valore35">S1P SRC</div>
<div id="V5" class="Valore25">
<img id="V5Img" src="FotoMagazzino\maga2-ITA.jpg" alt="Disponibilità">
</div>
</div>
As you can see, I've tried some stuff to achieve the result shown in the second image but with no success.
As side note: I'm not a professional HTML/CSS developer so my "code" is not written as the best practice hints.
EDIT:
As suggested by many of you, I've update my code in this way:
<div class="ClrOvFlw">
<div id="T1" class="Testata35">Modello</div>
<div id="T1A" class="Testata35">Linea</div>
<div id="T2" class="Testata25A">
<div style="float: left; clear: left;">Standard</div>
<div class="Valore25B" style="float: right; clear: right; position: relative;">
<img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa" style="position: absolute; display : block; width: 100%; height: 100%;">
</div>
</div>
</div>
Same CSS as above. My results:
EDIT 2:
following suggestions of Fils I've updated my code as follows:
<div id="T2" class="Testata25A">
<div style=" clear: left; float: left;">Standard</div>
<div class="Valore25B" style="position: relative; overflow: auto;">
<img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa" style="position: absolute; right: 0px;overflow: visible; height: 100px;">
</div>
</div>
getting this result:
I guess that I'm doing something wrong in following your hints folks.

Answer 1

You could use position:absolute; on that image if you can gurantee that there is always enough space that the whole image will be displayed:
div#V25BImg{
display:block;
position:absolute;
width:[WIDTH]px;
height:[HEIGHT]px;
}
Also you might need to add position:relative; on the parent of the image to ensure that the absolute positioned element will be placed on the correct part of your page.

Answer 2

Set the image holder to position absolute:
This is untested but should give you an idea
<div style="position: absolute; top: 0; right: 0; width: 20%; z-index: 1; overflow: auto;">
<img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa">
</div>

Answer 3

If you position your img absolutely, it will ignore wrapping.
div #V5 img {
position:absolute;
right:0px;
}

Answer 4

Maybe you can do by adding position: relative; in the div wrapping the image, and adding
position: absolute;
top: 25px;
margin-left: 10px;
to the image. Your code should look like this,
<div style="width: 20%;position: relative;">
<img id="V25BImg" src="logo.png" alt="Marchio Normativa" data-pin-nopin="true" style="position: absolute;top: 25px; margin-left: 10px;
">
</div>
check this out
https://jsfiddle.net/1w772kgg/1/

Answer 5

If you need a correct solution, do not use absolute positioning unless absolutely necessary. A floating element can be floating out from its parent container, if:
parent is overflow:auto, and
no relevant clearing object is placed after the element (same-side CSS clear, too wide line, overflow:hidden block element etc.)
See float rules here.
Try provide this conditions.