Ensure any content is resized to fit within a fixed div

Question

Ok, so here's the problem: I have a div which is set to almost the entire screen size (on a mobile device), content will be placed within it, however the content itself is not under my direct control. There will be no inline styles on images or links inside. I need to ensure that:

1 - Everything is visible within the div, and if there are long lines they are forced to wrap, or are simply cut-off.

2 - Images should maintain their aspect ratio but be resized to stay within the confines of the div.

3 - The content should "fill" the space, becoming larger or smaller as needed.

One last bonus: There will be a maximum of ONE image in the content, but there could be multiple links.

I've found some other answers on here, but nothing that meets this particular challenge.

jQuery is an option, but I've found it sluggish on mobile devices, jQuery Mobile is an option, but same basic problem.

What's the best combination of CSS and Javascript to perform this task in the most efficient way possible.

Answer 1

#wrapper {
 width: 960px;
 margin: 0 auto;
 overflow: hidden;
}

.img_class {
 height:auto;
 width:auto;
 max-width:960px;
}

/*If you have a div inside your wrapper then you would need this*/

#wrapper .contained_div {
 width: auto;
 display: inline-block:
 margin: 0;
}

/*If you want to stack stuffs one after another in a column then use this div */
.column {
 margin: 0 10px;
 overflow: hidden;
 float: left;
 display: inline;
}