CSS positioning issue with frames

Question

I want to set background-color:#000 for the whole .content div. I have made a frame for an image and it wraps the image perfectly ( http://jsfiddle.net/Yuaq8/ ), but only if the position for the frame is set to absolute . In this case .content is not filled correctly.

If I remove the position property that belongs to .pic-frame in this fiddle , the .content div is filled, but the frame looks weird. How can I make the frame look like the one in the first fiddle, so it fills the entire .content div?

Answer 1

position:absolute will remove your element from the flow. Use position:relative or display:inline-block instead on .pic-frame :

.pic-frame {
   display:inline-block;
   padding:12px;background-color: #DDD;
}

Demo

Answer 2

Try setting a width for .pic-frame.

Answer 3

Or you can set width to 200px in pic.frame div and remove the width and margin property from #pic div.

.pic-frame {
    width: 200px;
    padding:12px;background-color: #DDD;
}
#pic {
   height:200px;
   background-color: #999;
}