Narrow single column of text in a webpage

Question

Hello,

I'm making a very simple html webpage consisting only of text. How can I narrow the single column to make it easier for the reader to read?

I would like the body of text to be roughly in the center of the page and left aligned, with margins of white space (roughly equal) to left and right.

Answer 1

By putting the text inside a DIV with a style to control the width:

<DIV style="width: 300px">
    Text goes here.
</DIV>

For centering, based on Angela's suggestion in the comments:

<DIV style="width: 300px; margin: 0 auto">
   Text goes here.<br>
    And another line which is much longer.
</DIV>

Answer 2

Using CSS...

body {
  margin:0 auto;
  width:600px;
}

Answer 3

The width advice given by others is the key. From the usability standpoint, you definitely want to ensure that you don't have multiple columns Newspaper-style - people are just not used to reading web pages in this way. It's OK for unrelated content though.

Answer 4

If you want multiple columns you can build on Earwicker's answer doing something like:

<div style="float: left; width: 300px">
   First Column
</div>
<div style="float: left; width: 300px; margin-left: 1em;">
   Second Column
</div>

Answer 5

Full Cross-Browser Solution

The html:

<div id="centered"><!-- put your content here --></div>

The CSS:

body {
   text-align:center; /* this is required for old versions of IE */
}
#centered {
   width:400px; /* this is the width of the center column (px, em or %) */
   text-align:left; /*resets the text alignment back to left */
   margin:0 auto; /* auto centers the div in standards complaint browsers */
}

That's it, enjoy!