Question

How can I wrap the text displayed in the browser to either the width of the browser or a specified width, whichever is less?

I have been putting text inside <table width='850'> to wrap at a specific point, so if the user maximizes their browser on a gigantic monitor a whole paragraph doesn’t fit in a single line. But when the user makes the browser super narrow, the above method causes text to carry over the edge of the viewable area. Not what I want exactly.

So, I’m looking for a better approach.

Oh, maybe I should add that my pages are extremely simple. There aren’t banners up and down the left or right sides of them. Just text and images occupy the space from the left border of the browser to the right. Boring stuff.

EDIT – I accepted an answer, but I did find an issue (and a solution that seems to work) with the accepted answer when used with Internet Explorer. I spent half an hour trying to get max-width to work, but just couldn’t. Every other style property worked fine though. Then I discovered this http://svendtofte.com/code/max_width_in_ie which said I had to use the following for max-width to work in IE, and it did: p { width:expression(400 + “px”); }. I don’t understand why the fiddle example worked with max-width on IE, but not my page. Maybe it’s cuz I include my css in my html page?

Answer 1

You could set the max-width property in your css.

That way, the page will expand until a certain point and then no more.

Example:

.mainDiv{
    max-width:700px;
}

Working example: http://jsfiddle.net/Pa5JG/

More info on max-width: http://reference.sitepoint.com/css/max-width