I know this is possible; I've seen a few examples of it. In fact, www.csszengarden.com is a great example. When you go to the site, the content fits your browser window. When you resize or maximize the window, the content resizes to fit.

This is the main reason I've been using tables - they're "springy." But I've been taking the advice I read here seriously, and removed the table that handles my basic layout, replaced it with four divs. Unfortunately, I can't figure out how to make the main one change size with the browser window. When I click maximize, my site takes up about half the screen, and the rest is empty.

Here's a test page - the only one I've uploaded since getting rid of the tables: http://forrestcroce.com/Software/WebMaestro.html

The first div is the page header - works great. The next is the nav bar at left, with a fixed width of 150 px, followed by a 15 px div that has a button to hide or show the navbar. Finally, the last div holds the content. Its width should be the client area - 165 px, but you can't set formulas like that for width. I've tried not setting any width, and instead using min/max -width, but this puts the main div at the bottom of the rest of them.

I've looked at Zen Garden's code, and they're not using javascript to do this. ( Big relief! ) But ... I just don't understand well enough to figure out from their example how to do this on my own site.

So can I talk one of the no-tables gurus into sharing the secret?

It's real easy: just put your content inside a <div style="width: 600px;"></div> block ... adjusting, of course, to whatever width you really want.

And you also should really put the width declaration in a class, rather than declaring it inline.

Thanks. But what I'm really trying to do is not have to fix the content at a specific width. It seems like I have to set the width to get it to show up next to the nav bar, instead of underneath, but the problem is if I resize my browser window, the div keeps its old size and doesn't look right.

How do you make the content div variable in size, and show up next to the nav?

You need to use % statements in stylesheet declarations not pixels. This will give you a nice 3 col layout:

#mainright {
width:22%;
float:left;
background:#000000;
padding-bottom:10px;
}

#maincenter {
width:55%;
float:left;
background:#fff;
padding-bottom:10px;
}

#mainleft {
width:22%;
float:left;
background:#000000;
padding-bottom:10px;
}

If you want to see it in action on screen sizes from about 600 wide and up go here. It will break at less than 700 on this site because the width of the included form is fixed. If it were just text in the main content section it would resize to about any resolution.

YES, I realize that only adds up to 99%. That is due to issues with the different ways that that IE and FF handle padding. But, then, we have to leave you some more questions to ask.

And with the pictures you are using you will need to figure out how to display them them at the same % as the div you display them in. Pictures are like my form. Below a certain resolution they will break the display.

another way is to set dimensions in EMS, instead of %

one "em" is a rectangle exactly in size of one char in actual font and actual font size

this way you can set DIVs dimensions related to font properties, so your layout wull be adapt automatically if user changes fontsize or want to use his style-defined font face instead of your