Ituk Ituk - 1 month ago 6
CSS Question

shrink img to fit a div with a sidebar

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

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

Comments