Allow images in a <div> to be wider than lines of text in the same <div>

I would solve this one of two ways. Here is idea #1:

CSS

#inner {width:400px; position:relative; float:left;}

HTML:

<div id="inner">
    <img src="awesomeimage.jpg" alt="this awesome image" />
    <p>text goes here</p>
    <img src="awesomeimage.jpg" alt="this awesome image" />
</div>

SCRIPT:

<script>
var imgWidth = $(window).outerWidth();
$('#inner > img').css({
    width : imgWidth + 'px'
});
</script>

This is assuming you have jQuery loaded up, and that you are using Javascript on your site. If you want to adjust the width of the image, for padding, margins, and borders, do so in the variable.

You can have the image scale with the window, like in the example used in this JS fiddle I created for another question: http://jsfiddle.net/D544n/1/

Idea #2: With Out Javascript.

CSS

#outer {width:100%;} /* Outer becomes irrelevant */
#inner {width:100%;}
#inner img {width:100% !important}
#inner * {width:400px;} /* Set all childs to 400 */

HTML:

<div id="outer">
    <div id="inner">
        <img src="awesomeimage.jpg" alt="this awesome image" />
        <p>text goes here</p>
        <img src="awesomeimage.jpg" alt="this awesome image" />
    </div>
</div>

The selector for this was grabbed from another S.O. Question.

I don't think you are going to find a clear, simple way to do this. These are my two best ideas, and it could be solved other ways. If you are heading down this path to organize your content, you might want to re-think your strategy at accomplishing your goal.

What if you got rid of the inner div entirely but put a width of 400px on all p tags within the outer div? Then things would flow correctly and the images would be children of the outer div, so they could be limited by its width.

Of course, this could cause some problems if there are a lot of other elements that need to be contained within the 400px area, but if it's just the paragraphs and some headers then you're set.