shrink img to fit a div with a sidebar - css

Question

I'm working on an old website for someone and can't understand something with it's css:
I have a div the contains the page (article) content, which includes of course some images. in the top of the div there's another div, with extra information about the article. this second div is floated to the left.
<div class="entry-content">
<div class="lefttable"> //floated to the left
//some information here
</div>
//content here, including images
</div>
somehow the imgs inside the content are full sized even on the top of the page, and where they supposed to be beside the lefttable div, they jump beneath it.
here a print-screen: https://snag.gy/qFChjB.jpg
and the page itself: http://www.bayadaim.org.il/95b
Thanks,
Itamar

Answer 1

The parent of your image has
an inline style rule of width: 970px
wp-caption and aligncenter classes which mean:
width: 650px !important from style.css:1271
display: block; from style.css:1257.
All the above rules forbid your element from displaying inline, side by side with the floating content that precedes it.
You need to give the parent element of your image a width that compensates the width of the floating content responsively (you can do that using max-width and calc, provided that the page container has position:relative, which it does) and also you need to set it's display to either inline, inline-block or inline-flex. I recommend inline-block.
That's the theory.
In practice, for your very specific case, you also need to compensate for some padding/margin of the left-floating elements. Here's the CSS:
#post-34917 #attachment_34937 {
display: inline-block;
max-width: calc(100% - 220px);
position: relative;
margin-left: -20px;
}
#content .aligncenter>img {
width: 100%;
height: auto;
}
#media (max-width: 1023px) {
#post-34917 #attachment_34937 {
max-width: calc(100% - 170px);
}
}

Answer 2

You can give a try to max-width and calc():
.lefttable {
width:200px;
float:left;
}
.right {
overflow:hidden: /* to deal with floats in and out */;
}
.right img {
max-width:calc(100% - 200px); /* where 200px is the room used by lefttable ( mind borders, padding and margins) */
}
<div class="entry-content">
<div class="lefttable"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="right">
<img src="http://dummyimage.com/1200x200" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>

Answer 3

Using some jQuery I found the way. It is not responsive, but neither this theme I'm editing - so it's good enough for me. And of course anyone who wants to develop it, is very welcome to do so.
CSS Part
Set width for all the images wrapper (wp-caption) to the width of the main content div where it is narrower, next to the floating div.
#content .wp-caption {
width: 66%;
}
jQuery Part
//make all images in posts 100% width except images next to the left table
jQuery(document).ready(function(){
var h = jQuery(".lefttable").height(); //get left table height
jQuery('.entry-content .wp-caption').each(function(){ //loop through all .wp-captions in the content
jQuery(this).removeAttr('style') //remove any disturbing inline styles. optional.
var p = jQuery(this).position(); //get each .wp-caption position
var top = p.top; //top position
if(top > h){ //if .wp-caption is below .lefttable
jQuery(this).css("width", "initial") //change .wp-caption width to original (or anything you like)
}
});
});
That's it. I hope someone could benefit from that.
Itamar