Allow image to be wider than containing div

Question

Is there any way to make a div not extend it's width, but make an image which is visible outside the div in IE8? For example, my div might be 200px wide, but the image 250px wide.

Solution 1

You could position the image 'absolute'?

div > img {position:absolute;}

Solution 2

Set the div's width to 200px and its overflow to visible.

Comments

[Marc Costello]

This will give you the desired effect. Although personally i believe the container should always be large enough to hold it's contents. Maybe a different approach is required

[Krish]

@marc constello:yep i tried that too, but the main thing is when i increase the width of the image the container div also increasing according to the width of the image so the image always be inside the container.. any way to fix this...?

[Marc Costello]

Are you giving the images set widths and heights?

[Krish]

@marc constello:container div width:200px; image width:250px; and container div set with overflow:visible

[Marc Costello]

@krish the overflow:visible is not needed. just add div > img {position:absolute;}

[Sagar Patil]

This should actually work. The absolute takes the image out of the regular flow of the document and hence will place it outside of the divs structural flow. Since it's out of the flow, the div should not expand. As @MarcCostello suggested, try it without the overflow.

[Krish]

i used this but it remains the same

[Mr Lister]

But it works; I tested in IE8. Can you post the code you tried?

[Krish]

@MarcCostello and Sagar patil: in IE the issue is fixed guys absolute was play its role... Thanks a lot.