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

Computers & Internet Web Development Website Hosting

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.


Jquery/Javascript Web Development

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.


ASP.NET Web Forms Web Development

ASP.NET bug with RadioButton GroupName in Repeater

by John Avis | September 1, 2019

I rediscovered a bug in ASP.NET that affects RadioButtons inside repeaters. Here is my solution to the problem.

Comments

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

Leave a Comment

Tags

About me

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

Subscribe

Get the latest posts delivered to your inbox.