Tutorial :Narrow single column of text in a webpage



Question:

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.


Solution: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>  


Solution:2

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!


Solution:3

Using CSS...

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


Solution:4

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.


Solution:5

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>  


Solution:6

This is a modern solution that is more flexible: setting a max-width allows the column to be smaller when shown in a narrow viewport. It also uses rem, which is the width of characters and a better unit for text. It's 20rem in the example to trigger in this layout, but something like 60 to 80 is usually recommend 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>

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »