Render images 100% outside of div - html

Question

I'm working on a template for WordPress and need to render images to the left and to the right side of the main content div.
I have a wrapping div of 100% width, so the images don't overflow the screen, then I have given the images position: absolute (relative to the content div), and a negative value (the width of the image) on the right/left parameters.
This works fine, and renders the images nicely to the left and right of the main content. But the problem is, these images need to change every once in a while, and the width of the images varies, so the left and right offsets are not correct anymore.
How can I render the images outside of the div, without knowing the width? I've tried Left/Right:-100%;, but that doesnt work.
The images are purely decorational, and dont have to be (fully) visible when the screen is too small.
Thanks for any help!

Answer 1

If you can't specify the width and want to display the image as is (not scaling it), you can float the images to the right and left and use overflow:hidden on the content
.left {
float: left;
margin-right: 20px;}
.content {
overflow:hidden;}
.right {
float: right;
margin-left: 20px;}
However, you will need to have the following struture in your html for the layout to render correcty:
.wrap > img + img + .content
http://jsfiddle.net/h6u65hp8/1/

Answer 2

How about something like this? http://jsfiddle.net/usL5vcqg/
<div id="wrap">
<div id="leftImage">
<img src="https://www.google.com.au/images/srpr/logo11w.png"/>
</div>
<div id="content">
text goes here
</div>
<div id="rightImage">
<img src="https://www.google.com.au/images/srpr/logo11w.png"/>
</div>
</div>
* {
margin:0;
padding:0;
}
#wrap {
width:100%;
}
#leftImage {
width:20%;
float:left;
}
#rightImage {
width:20%;
float:left;
}
#content {
width:60%;
float:left;
}
img {
width:100%;
}
The images will scale depending on the size of the screen and they will always sit on either side of the content.

Answer 3

I actually came up with something myself. The content div has a static width, so what I did was switch the left and right parameters around, and set it to the width of the content div (plus some padding).
<div class='prevent-overflow'>
<div class='content'>
<img src='http://placehold.it/200X200' class='left-side-image' />
<img src='http://placehold.it/200X200' class='right-side-image' />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at libero nec ex vestibulum luctus ut eget odio. Nunc mollis, nulla eget cursus porttitor, neque sem rhoncus est, vel consequat leo lacus at nisl. Nulla ac sem eget lorem malesuada malesuada. Fusce in erat tempus, elementum sem id, dapibus sapien. Vivamus vestibulum enim nulla, id porttitor odio condimentum ac. Pellentesque lacinia mollis elit tristique luctus. Vivamus luctus ultricies ullamcorper. Vivamus eros orci, luctus et pellentesque commodo, egestas et velit. Duis ante velit, feugiat sed gravida ac, tempus sed odio. Praesent tincidunt risus id ex placerat rhoncus. Maecenas sit amet pharetra neque. Aenean dapibus a velit quis ultricies. Quisque aliquam erat nec est rutrum, nec ornare urna ultrices. Quisque accumsan purus non ex sagittis, in facilisis massa facilisis. Vivamus fermentum libero dictum neque laoreet, sit amet pretium dui luctus.
</div>
</div>
.prevent-overflow {
overflow:hidden;
width:100%;
}
.left-side-image{
position:absolute;
right:320px;
}
.right-side-image{
position:absolute;
left:320px;
}
.content {
width:300px;
margin:0 auto;
position:relative;
}
In my initial code, I had a negative Left/Right (depending on the size of the image) in the .left-side-image and .right-side-image classess.
http://jsfiddle.net/6wp1h52c/