Can an image cause a div to stretch?

Question

i'm trying to make a site where certain pages are tableless. i was to use pure css.. but have a 'table' style apperance. i've designed the page with several divs with fixed widths.. using the float feature. some of these div's are to contain user submitted content.. so.. i'm having an issue with embedded images either exceding the width of the div.. or getting cut off by the right side. is there anyway to have a div stretch to the width of its content.. and default to the fixed width if no content stretches it?

Answer 1

Just leave your DIV with a set specific width, and then tell the DIV that all of the images displayed inside it will be no larger than a certain width:

#mydiv {
width:800px;
max-width: 750px;
}

This wont stretch the image, but it will scale it down if it's too large.

You could even do max-width:100%; and it should keep the images no larger than the DIV's width.

Answer 2

What you can do is to define a fixed-width

Answer 3

Yes. You want to use the min-width property as well as setting the display for your images to 'block'.

For example:

CSS:
.box-c { width: 900px; border: 1px solid #000; }
.box-c img { border: 1px solid red; display: block; }
.box-c .one, .box-c .two, .box-c .three {
min-width: 200px;
width: auto!important;
width: 200px;
float: left;
border: 1px solid green;
}

HTML: