Geek Answers Handbook

Narrow single column of text on a web page

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

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

+4
source share
6 answers

By placing the text inside the div with a style for controlling the width:

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

To center based on Angels' suggestion in the comments:

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

Complete Cross Browser Solution

html:

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

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 */ }

What is he, enjoy!

+5
source

Using CSS ...

 body { margin:0 auto; width:600px; }
+2
source

The width recommendation provided by others is the key. In terms of usability, you definitely want to make sure you don't have multiple columns. Newspaper style - people are simply not used to reading web pages in this way. This is normal for unrelated content.

0
source

If you want multiple columns you can build using Earwicker answer by doing something like:

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

This is a modern solution that is more flexible: setting the maximum width allows you to reduce the column when displayed in a narrow viewing window. It also uses rem , which is the width of characters and the best block for text. This is 20rem in the example to run in this layout, but something like 60 to 80 is usually recommended for lines of text.

 p { max-width: 20rem; margin: auto; } 
 <html> <body> <p> AT&T and Johnson & Johnson, among the biggest advertisers in the United States, were among several companies to say Wednesday that they would stop their ads from running on YouTube and other Google properties amid concern that Google is not doing enough to prevent brands from appearing next to offensive material, like hate speech. </p> </body> </html>
0
source

More articles:


All Articles