I've done a variety of searches out here, and I think this is a new topic. If not, my apologies!

Most recent version of Coffee Cup HTML editor, paid version.

I'm using CSS to create my formatting, including a header as well as three columns. The columns on the outside have a fixed width, and the middle varies up to a max size. Although I've set the height attribute to 100% everywhere I can imagine, when I check my page in Firefox the middle section formatting ends when the two outside columns end. BTW It works fine in IE.

I've already added a container div as well as trying the Firefox debug (No luck). Any help would be greatly appreciated. Here is my CSS

<!--
body {
background-color:#CCCCCC;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:90%;
height:100%;
max-width:1024px;
text-align:center;
margin-left:auto;
margin-right:auto;
}

div#container {
width:90%;
max-width:1024px;
height:100%;
margin: 0 auto;
text-align: left
}

div#navigate {
width: 100%;
background-repeat: repeat-x;
border-top-style:none;
border-bottom-style:outset;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

#navigate td{
text-align: center;
}

#navigate a:link {
color: #000099;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
}

#navigate a:visited {
color: #000099;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
}

#navigate a:hover {
color: #339999;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:underline;
}

div#header {
padding: 0 0 0 0;
margin: 0px;
height: 110px;
text-align:center;
vertical-align:middle;
background-color:#FFFFFF;
border-bottom-style:outset;
}

div#wrapper {
width: 100%;
background-repeat: repeat-x;
background-image:url('Images/blue31.jpg');
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

div#main {
background-color:#FFFFFF;
margin-top: 0px;
height:100%;
text-align:justify;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-left: 200px;
margin-right: 180px;
line-height: 120%;
padding: 15px 45px 15px 45px;
}

#main hr{
color:#C0C0C0;
border-style:dotted;
}

#main table{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
font-size:12px;
line-height:120%;
text-align:left;
}

#main a:link {
color: #000099;
font-weight:bold;
text-decoration: none;
}

#main a:visited {
color: #000099;
font-weight: bold;
text-decoration: none;
}

#main a:hover {
color: #006600;
font-weight:bold;
text-decoration: underline;
}

div#left {
background-color:#FFFFCC;
background-image:url('Images/leftcolumncorner.gif');
background-repeat:no-repeat;
width: 200px;
height:100%;
color: #000099;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding: 15px 10px 25px 15px;
border-right-style:ridge;
border-right-color:#666699;
margin-top: 0px;
float: left;
}

#left a:link {
color: #000099;
font-weight:bold;
text-decoration: none;
}

#left a:visited {
color: #000099;
font-weight: bold;
text-decoration: none;
}

#left a:hover {
color: #006600;
font-weight:bold;
text-decoration: underline;
}

#left p {
line-height: 12px;
}

div#right {
background-color:#FFFFCC;
background-image:url('Images/rightcolumncorner.gif');
background-position:right top;
background-repeat:no-repeat;
text-align:left;
width: 180px;
height:100%;
padding: 15px 10px 25px 15px;
margin-top: 0px;
float: right;
border-left-style:ridge;
border-left-color:#666699;
}

div#footer {
padding: 0px;
margin: 0px;
font-family:Bookman Old Style;
font-size: 12px;
Color: #333333;
border-top-style:double;
border-top-color:#999999;
clear:both;
}
-->

Since I don't have your markup in front of me, I have to imagine how you are using your divs. So, pardon me if, I am not right on the ball. In fact, it might be easier to just tell you in general how to set this up and you can adapt it to your styles.

You want to make sure your three columns are wrapped together and sit inside of a container. That container then is how you set your positioning. Also, I don't ever use height 100%. Not sure how well that works or is supported. I typically use height:auto or don't indicate since auto is the default.

OK, baring a look at your html code.or the site uploaded I'm going to guess at it.

In your div#container try overflow: auto;

I am wondering if he is not floating his elements what the overflow option will do?

It's tough to tell he may be floating someplace else, but your right is is suppose to stop the surrounding container from collapsing on the float.

Tried the overflow first, and it actually created a scroll bar just for the floating object. Interesting but not what I wanted. So now I'm reworking my useage of the container to JUST the three columns and seeing if that will fix it. My website isn't live yet, which is why I haven't directed you to it. Thanks for helping me despite myself

It would help to have a url to see the page and grab the css and html.

to get rid of the scroll bar set width to 99%

Well the overflow would solve my problem but I can't get rid of the scroll bar even if I set my width to 99%. So I'm going to post my index page and the CSS, just remember its not finished yet and none of my images are loaded.

http://www.smallbusinessfinanceforum.co … xtest.html

the css file is called sbff.css

Thanks!

hmm, odd. That has always worked for me. Maybe it only works when you float.