4:46 PM -:- Posted by Allen    

Full-Width Templates

Doug, Gene, anybody who likes to change their blog template to adjust formatting, check this out.

You should see that (a) my blog takes up the full width of your browser window, and (b) my blog getts narrower and wider as you re-size the window you are looking at right now, with the middle column adjusting to take up or let out the difference.

This is done by changing two entires in the template (for this template, at least, it being a two-table template where the second table includes three columns).

The entries to be changed are the TABLE definitions' width statement. The pertinent part of the definition statement is right at the beginning of the line of code. In my template, that segment reads

table width="750"

I changed the "750"' to "100%" and that does the trick; each of the table-definition code segments now read in the first part,

table width="100%"

This tells the table to fill the full width of the window that is displaying it.

Each column automatically takes up either the width it is set to, or the width it needs for the widest element in it, whichever is greater, so if you set widths on the left and right columns and no width on the middle column, it is the middle column that becomes the variable.

CAUTION: This doesn't quite work if the DATA table elements for the left and right columns don't have a width set. If they don't, you'll get a weird result with all three columns adjusting their sizes, if they have any free-form text in them. For example, my left-hand column has a little quote down near the bottom about people's capacities. That would cause that column to compete with the center column for space.

To prevent columns from competing for width, make sure you have widths set for the columns you don't want to be changing when the window is re-sized. In my template, the left and right columns come pre-set to...

!-- COLUMN ONE --
td valign="top" width="125"

...so there's no problem.

The basic rule is that each column automatically takes up the width it needs for the widest element in it, and no more IF there is a width statement not wider than that element, so it is the middle column that becomes the variable. Note that this IS to say that the width statement is usually ignored if there's an element in the column that's wider than the width you set. In the case of this blog, that happened a few days ago because of the length of a URL I had in the right-hand column. In that case, it pushed the right-hand column out past the right edge of the headline.

Again, make sure that the columns that you don't want to vary have width statements in their defining table-data element:

td valign="top" width="125"

-0-