I've been having a major problem, and I know this may be a newbie question but here it goes...


The page that I'm working on has 2 navigational bars. One on the left, and one on the right (float left, float right) and the main content layer is in the middle.

The banner's width is set to 100% (optimized for any resolution, the way that I would like to keep the ENTIRE site)
However, I can't seem to set the width of my content layer so that it'll resize itself in accordance with the users resolution.

#container {
max-width: 100%;
max-height: 100%;
}
#title {
background: #000000 url(../images/title_bg.jpg) no-repeat;;
width: 100%;
height: 130px;
float: left;
}
#news {
color: #00FF00;
background: #000000;
width: 100%;
height: 20px;
border-top: #000000 medium solid;
border-bottom: #000000 medium solid;
float: left;
}
#leftNav {
background: #000000;
width: 145px;
height: 1000px;
padding-left: 5px;
float: left;
}
#leftNav a:link {display: block;}
#leftNav a:hover {color: #FFFF00; background-color: #444444; display: block;}
#content {
text-indent: 20px;
text-align: justify;
width: 70%; <--- I don't know what to do with this....
padding-left: .5em;
float: left;
}
#rightColumn {
background: #000000;
text-align: center;
width: 145px;
height: 1000px;
padding: 5px;
float: right;

}

Lets see ALL the code or a URL.

Is your banner an IMAGE that has dimensions wider than #content ? If so, then the container is going to stay as wide as it's widest element.

if this is as I suspect, and the two floated elements are within the #container div, setting overflow: auto on #container should be enough to make it contain the two floats. If this doesn't work in ie6, however, try setting the height to 1% also.

I'm sorry, I misunderstood what you are trying to accomplish. I will drink some more coffee now. Can we see the rest of your code as well?