Image max-width (non floated) use space next to floated div? - image

Question

The site I'm working on will display lengthy articles on screen. The site is responsive so everything you see on screen will re-size and re-flow to accommodate different screens. Previously we had a two column layout where the articles would be in the left floated div. And a side bar of shorter content would be in the right hand floated div.
It was decided that since the right hand content was so short there was lots of wasted white space beneath it. I was asked to try and incorporate the right hand column into the left hand div so the text would wrap around it.
That part was pretty easy, I just floated the now embedded right hand column into the article and the written text wrapped around it.
See this JSFiddle:
http://jsfiddle.net/TheMonkxx/2aucA/1/
Here is the HTML for the page:
<div class="parent">
<div class="right_content" align="right"></div>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas vitae nunc arcu. Cras tortor velit, consectetur
quis consectetur vel, ultrices eu nisl. Pellentesque convallis orci ligula,
id pharetra mauris. Vestibulum eleifend, turpis eget commodo dapibus, diam
magna nunc auctor elit, nec molestie libero quam quis mi. Donec interdum
velit non arcu sollicitudin eu ullamcorper lectus venenatis. Vivamus at
lacus magna. Proin in diam semper urna fermentum molestie sit amet sit
amet augue. Nulla sit amet massa eu risus laoreet laoreet eget sed erat.
Aliquam quis enim in odio porta consequat. Ut egestas urna et erat iaculis
et aliquam libero auctor.</div>
Here is the CSS
.parent {
border: 1px solid green;
width: 200px;
float: right;
}
.right_content {
width: 25%;
height: 150px;
float: right;
background-color: red;
margin: 0 0 7px 7px;
}
The problem comes in when I try to add images to the article content. Since the site is responsive, I want the images to have max-width: 100% applied. However when I do that the images go 100% of the parent container and push any written content beneath the images gets pushed after the right hand column. See this fiddle:
http://jsfiddle.net/TheMonkxx/2a66J/
Here is the updated HTML for the page:
<div class="parent">
<div class="right_content" align="right"></div>
<img src="http://www.thetop22.com/wp-content/uploads/2012/01/Black-Keys-Banner-3.png"
/>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas vitae nunc arcu. Cras tortor velit, consectetur
quis consectetur vel, ultrices eu nisl. Pellentesque convallis orci ligula,
id pharetra mauris. Vestibulum eleifend, turpis eget commodo dapibus, diam
magna nunc auctor elit, nec molestie libero quam quis mi. Donec interdum
velit non arcu sollicitudin eu ullamcorper lectus venenatis. Vivamus at
lacus magna. Proin in diam semper urna fermentum molestie sit amet sit
amet augue. Nulla sit amet massa eu risus laoreet laoreet eget sed erat.
Aliquam quis enim in odio porta consequat. Ut egestas urna et erat iaculis
et aliquam libero auctor.</div>
And the updated CSS:
img {
max-width:100%;
}
.parent {
border: 1px solid green;
width: 200px;
float: right;
}
.right_content {
width: 25%;
height: 150px;
float: right;
background-color: red;
margin: 0 0 7px 7px;
}
Giving the image a pre-defined width fixes the layout but it causes problems for the responsive nature of the site. I also will have some articles which have images at various places in the copy, so I can't always predict an image will be beside the right hand column.
Any ideas or suggestions how I can get the desired layout and keep the responsive aspect working? Thanks!

Answer 1

Although this is old, I've just figured out a good and simple solution using jQuery.
CSS Part
First we need to set all the images to be small so they can fit next to the floating div. let's say 75%;
.parent img {
max-width:100%;
width: 75%;
}
jQuery Part
Then we want to reset the width of all images below the floating div:
jQuery(document).ready(function(){
var h = jQuery(".right_content").height(); //get floating div height (let's say it's dynamic).
jQuery('.parent img').each(function(){ //loop through all images in 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 img is below the floating div
jQuery(this).css("width", "initial") //change img width to original (or anything you like)
}
});
});
hope it help somehow.

Answer 2

Without a script with which to do some calculations, you might have to settle for smaller images.
http://jsfiddle.net/2a66J/2/
img {
max-width:72%;
float: left;
}
Technically, your site isn't "responsive". It's "fluid". If it was responsive you could set fixed max-widths based on viewport size and have 100% image width for all scenarios. The minor drawback is that you aren't usually using 100% of the available viewport width for your page with a responsive design.

Answer 3

One way to look at this, however it is not very efficient and be very bloated if you are working with lots of images.
If what you posted on jsFiddle is all that you have to work with, then my suggestion is to add a around said article image. You will then constraint this to a percentage and either float it left or right with a secondary class.
HTML
<div class="article_image article_image_flleft"><img src="http://www.thetop22.com/wp-content/uploads/2012/01/Black-Keys-Banner-3.png"
/></div>
CSS
.article_image{
width: 50%;
}
.article_image_flleft{
float: left;
}
Fiddle:
http://jsfiddle.net/D8ELj/1/
As isherwood points out, setting various viewports at be more beneficial in the long run.