图像在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&agrave; 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;">&nbsp;
        <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.