fixed vs. liquid layout

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Hopefully someone can either have some good examples or point me to
some good web articles on fixed layout.  I have found that several of
the sites I looked at to base my design were fixed, but have come
across some roadblocks.

I have a 3 column layout with a header, left, center, right, and
footer.  The first struggle I have is that the font appearance varies
between my work display and my home laptop display.  This doesn't seem
to be an issue with "most" sites and certainly not to the extent of
change I am seeing with my mock-up.

Currently in my css I am using font-size: 16pt;  Looks horrible at
home but looks fine at work.  If I make it look fine at home then the
font size is too small for the work display.  How do people deal with

Next item would also be the difference between a work display and
home.  I decided to go from a liquid layout to a fixed (although saved
the css as backup).  I have the header and all the columns to be
exactly the way I want them no matter what display.  The only problem
I have now is the footer which I want to "stick" to the bottom of the
browser window when content is not filling up the page.  Otherwise the
various columns should push the footer downward.  Currently I have the
left column with text extending beyond my laptop page display and the
footer is appearing halfway down the page...looking horrible.

based on the one site I found to create the 3 column fixed layout I
got this for the footer css.

#footer {
    position: relative;
    width: 1024px;
    clear: both;
    margin-top: 100px;
    background-color: #99ff33;


Thank you for any suggestions/help/articles.

Re: fixed vs. liquid layout

Quoted text here. Click to load it

Consider the pixel and physical (inches) screen sizes for home and

Point-sizes are measurements in inches (each "point" is 1/72") and
they attempt to make the letters a specific size.  A 16-pt font is
16/72" high, about a fifth of an inch.  So the "roughness" vs
"smoothness" will vary slightly depending on how many pixels-per-inch
the screen displays.  And the size of a letter being fixed will cause
many more line-breaks etc on a small screen than a large one.

I'd suggest going to the following link and considering the effects of
specifying size in various units.  The user has presumably set his
default font size for his own comfort.  You can specify font size in
absolute terms, or relative to the user's preferences.

no aluminum siding offers today

Re: fixed vs. liquid layout

crankypuss wrote:
Quoted text here. Click to load it

Yes, never forget how important it is to take into account the bugs in
Microsoft Internet Explorer 3.x


Re: fixed vs. liquid layout

Quoted text here. Click to load it

By not using pt (use pt for print media).

Instead use:

or even px

Quoted text here. Click to load it

I once had to do a site with a footer, and it's a pain in the ass, to
say the least, to get it right.

John Bokma                                                               j3b

Blog:    Facebook:
    Freelance Perl & Python Development:

Re: fixed vs. liquid layout

On Thu, 26 Aug 2010 22:59:18 -0700 (PDT), sjsean

Quoted text here. Click to load it

You may want to take a look at /
There's a lot of material to go over (this isn't a find it-copy
it-paste it site), but it has fixed and liquid layouts, IE bugs (WHAT?
IE has bugs? :) )and a lot of information on making a site look good.

Site Timeline