How do you position a relatively narrow paragraph (optimal paragraph width: http://www.ronswebsite.com/blog/optimal-column-width-for-websites) within a wide (e.g. 1100px) website, so that it looks aesthetic?

For example, if I have a full 1100px width menu bar and a narrow text column right below it, the blank margins on the left and right of the text column would be too wide and making it all look unaesthetic.

I've tried some solutions such as using multi-column layout or placing borders on the left and right of the blank margins (they create the impression that there's content from end to end) but I am looking for some better ideas.

  • Does the site have any other content you can use to frame it? Look at this site for example. Your question is in a column only 660px wide but it is framed with the up/downvote element, the related questions, and the comment/answer area so that it doesn't look like its floating alone in whitespace.
    – DasBeasto
    Mar 29, 2016 at 12:49
  • I'd argue that pixel width isn't the right metric since that doesn't account for font size. I always learned that an average of 13 words per line was optimal. And, of course, the width of a 13-word column changes as font size changes. Mar 29, 2016 at 13:08
  • @ DasBeasto - the site doesn't have any other content
    – drabsv
    Mar 29, 2016 at 15:14
  • @Ken Mohnkern - that is correct, but I am referring to the general problem of dealing with extra large margin spaces on both sides of the text column; the pixel width I mentioned in my question was just to serve as a reference point.
    – drabsv
    Mar 29, 2016 at 15:16
  • In many cases, having a fixed width menu bar given the amount of content you have looks much nicer than trying to make the content look nicer with a long menu bar.
    – Michael Lai
    Mar 29, 2016 at 23:51

2 Answers 2


On line length, I'd think the jury is still out. There are studies that conclude longer lines are easier and faster to read, but if you ask people they'll say they prefer narrower columns (probably influenced by our experience with book paragraphs being as wide as the book itself).

On paragraph length and readability by a Google Cognitive Scientist: Google I/O 2013 - Cognitive Science and Design https://youtu.be/z2exxj4COhU?t=23m29s

Examples on how to position a narrower column on a wide viewport can be found here: http://www.ronswebsite.com/blog/optimal-column-width-for-websites/ (Not endorsing the article's research, just sharing the examples)

Also, take a look at Google and Facebook (and even Stackexchange) as those sites are used by millions and even if they're not the perfect width they might be an excellent reference and source of comparison for users, so you'd gain by letting users feel it is a width they're familiar with.


Rethink your content strategy.

If you have a wide header but very narrow content then something has to change - If the entire site is like this then you might simply want to consider narrowing your header. If, on the other hand, most of the site fills the width of the header then you probably want to rethink the content on those pages - Add more pictures, expand the text... etc.

  • Expanding the text is not an option for me in this case, as the idea is to stick to some optimal width of text paragraphs. What I have tried is using a two-column layout, it does the job, I've just been wondering if there's not a more elegant solution.
    – drabsv
    Mar 29, 2016 at 15:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.