html - how to show product info after image in bigger zoom levels -

html - how to show product info after image in bigger zoom levels -

in shopping cart details page product image defined using code below. proportions should preserved.

for bigger zoom levels image hides start of text after it.

how render page in zoom levels?

for unknow reason div #productinfo starts @ left side shoult start after image. tried add together display:inline-block every div not have effect. jquery, jquery ui, fancybox , pikachoose used.

html:

<div style="float: left; width: 30%; margin-right: 1%"> <a href="#" class="details-picture"> <img src="/thumb?product=1308318&amp;size=198" alt=""> </a> </div> <div id="productinfo"> <div> cost <span id="price"> 1.73 </span> </div>

css:

.details-picture { background: none repeat scroll 0 0 #ffffff; border: lean ridge #bbbbbb; display: block; float: left; height: 200px; line-height: 200px; margin: 0 20px 15px 0; overflow: hidden; position: relative; text-align: center; width: 198px; } .details-picture img { border-width: 0; height: auto; max-height: 198px; max-width: 198px; vertical-align: middle; width: auto; }

this seems due inline attributes on top-level div. combination of float: left , width: 30% causes issue experiencing.

<div class="productimage"> <a href="#" class="details-picture"> <img src="/thumb?product=1308318&amp;size=198" alt="" /> </a> </div> <div class="productinfo"> <div> cost <span id="price">1.73</span> </div> </div>

jsfiddle

html css jquery-ui internet-explorer shopping-cart