Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.


    #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;

  <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>

share|improve this question

closed as off topic by John Conde Feb 5 '11 at 14:53

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

HTML/CSS questions are better suited on Doctype – John Conde Feb 5 '11 at 14:53
My apologies. Are you able to transfer it? – casr Feb 5 '11 at 15:04
Ah, Doctype isn’t run by SO. But thanks for the tip none-the-less! – casr Feb 5 '11 at 16:39

Browse other questions tagged or ask your own question.