Setting a Maximum Page Width Using CSS

John Avis by | February 16, 2008 | HTML/CSS Web Development

When designing a web site one of the first decisions to make is whether to use a fixed-width, liquid or other type layout.

Fixed-width designs are popular but have certain limitations. If you design for 800x600 your layout may look much too small at a higher resolution. If you design for 1024x768, lower resolution screens will require a horizontal scrollbar.

Liquid designs, although not the perfect solution, have less compromises. At very low resolutions they can become very difficult to read and at very high resolutions line lengths can become very long and also difficult to read.

A good compromise in my opinion is to use a liquid layout but set a limit to the width.

One method of doing this reliably on popular browsers is to use the following styling:

<div style="max-width:1004px;width:expression(document.body.clientWidth>1004?'1004px':'auto')">
In this case, the maximum width is set to 1004 (for 1024x768 screen resolution less 20px for the vertical scroll bar).

Related Posts

Intermittent "Unable to read data from the transport connection: net_io_connectionclosed" errors

by John Avis | May 6, 2020

If you are having intermittent problems sending email in .NET using System.Net.Mail consider switching libraries.


500 Internal Server Error after migrating from IIS 7.5 to IIS 10

by John Avis | November 4, 2019

As support ends for Microsoft Windows Server 2008 I have recently gone through migrating some websites to a new server running Windows Server 2016 and IIS 10 but some of the websites did not work.


tagInput: A simple jQuery plugin for tag entry using Bootstrap 4

by John Avis | October 15, 2019

For a website project I needed a way to enter multiple tags. I just wanted something simple that I could easily modify to suit my own needs, so I wrote my own.

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment

Tags

About

...random postings about web development and programming, Internet, computers and electronics topics.

I recommend ASPnix for web hosting and Crazy Domains for domain registration.

Subscribe

Get the latest posts delivered to your inbox.