I mocked up my intended outcome. So the blue element is the main content of the website and the yellow element represents something like a diagram or an image that has a greater width than the blue element.
Ideally, I would like a purely CSS solution that is able to deal with various sizes of images. I have tried various things but have failed so far. I hope you can help!
Here’s some example markup to set you on your way.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#el1 {
display: block;
margin: 0 auto;
width: 30em;
background-color: #8cabde
}
#el2 {
/* works when the width is
less than the parent */
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<article id=el1>
<p>Some content above.</p>
<img id=el2 src=http://i.stack.imgur.com/JFfGG.gif
title=spaceball width=600 height=400>
<p>Some content below.</p>
</article>
</body>
</html>
