One common issue for new web programmers and designers is keeping line lengths under control.

The default HTML behavior, as this div shows, is to have your text span as long as its container element allows. This could be as long as the viewer's screen is wide, which can make it quite hard to read.

It is easy not to notice this because typically you are developing your webpage in a reasonably sized browser window, but other people will view your page under different circumstances depending on browser and screen size. The best way to ensure that lines of text (or your design in general) does not get too long is to have all of your content inside a container div that has a fixed width.

You can see from the CSS that styles this container that this text is going to have a much more normal and readable length (35 ems). There are several different units you can use to control sizing on your pages and help create elastic layouts that automatically conform to your user's screensize.

Even though I've applied my container style to just this box, you can apply it to your entire HTML page. By using the same container element on each page of your site, you can easily adjust the layout of all your pages by editing only the "container" class in your CSS file.

MMMMMMMMMMMMMMMMMMMM

font-size: 12pt;
width:12em;

MMMMMMMMMMMMMMMMMMMM

font-size: 12px;
width:144px;

MMMMMMMMMMMMMMMMMMMM

font-size: 12px;
width:132px;