CSS - Div Ends Prematurely

I have a site construced of divs run off css. If I have a lot of content, Firefox will cut off the div at a certain point stopping the text and background color from displaying. IE looks fine. I don't have height set up. Does anyone know of this bug and how to stop it? I'm not finding an answer through google.

I am intergating my forum software into my main page. I have created a 100% non-table front page, but there is one table that is stuck at the bottom of the page by the forum software.

So my DIV tag ends and a TABLE begins and they overlap. I placed a clear:both DIV tag after my last DIV tag, but that didn't seem to help.

I don't think I can convert the TABLE to DIV since it's part of the software. I was just thinking of adding a height:20px to my "clearit" DIV to pad the bottom enough to push the table down but that seems hokey.

Gday CSS PPL,

Im still yet to test on other browers, but im using IE 6.0

while the explorer is full screen the width of my div is 100%

But when i resize the browser on the horizontal untill a horizontal scroll bar appear, and scroll to the right, the div cuts off where the scrolling begins,

div.banner {
background-image: url(../images/banner_repeat.gif);
width:100%;
height:163px;
text-align:center;
}

and yeah, the background image 'banner_repeat' stops repeating at that point.

any help would be great,

Thx in advance,

James

I have a css layout I'm working, that is all divs (my first time doing this without tables).

My page consists of all divs, and then the body is a table for displaying date from a database.

My problem is that I have the footer positioned absolutely at the bottom of the page, which is what I want, EXCEPT when the table extends longer and the user needs to scroll down.

If the table does not extend the full height of the screen, then I want the footer at the bottom of the screen, but if the table extends past the bottom of the screen, I need to footer to be at the end of the table.

I hope that makes sense.

CSS Tags -- Just a portion of them:

Code:

body {
  margin: 0px 0px 0px 0px;
  background-color: #E7F1FD;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  height: 100%;
}
/*This is the main body of the page and contains the db data*/
#pwdb_body {  
  background-color: #E7F1FD;
  border: 2px solid #FFF;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 165px;
}
/*Footer */
#left_footer {
  background-image:url(images/bar_header2.jpg);
  width:100%;
  height:36px;
  position:absolute;
  bottom: 0px;
}

My DIVS (partial):

Code:

<!-- START BODY -->
<div id="pwdb_body">
<table width=100% border=1 name="main_body" bordercolor="#000000" style="border-collapse: collapse;" cellspacing=0 cellpadding=1>
<tr>
  <td>...table data...</td>
</tr>
</table>
</div>
<div id="left_footer"><img src="images/index_02.gif"/></div>

I have attached a screenshot of what I'm talking about. The footer bar is highlighted in a red box, and the table bottom is pointed out by a red arrow.

I posted something the other day, but that thread was elaborate but not helpful at all, because it missed a useful example with CSS sheet and everything. So here's another attempt and hopefully people know where the problem resides. I've stripped down the following page as far as I could within limited time.

Before you click and open this URL, I think it's best to read my introduction first, because the problem often only occurs the first time after opening IE5.5 or IE6.0.

With IE6.0 it might be that it _does_ work for you now. I notice that the bug is very infrequent with IE6.0. Sometimes it feels like IE6.0 cached the right page and doesn't want to show the wrong page the first time anymore. With IE5.5 it's still consistent on first time though... it will show the bug!

A refresh may fix the page. Which is basically like opening the page a second time.

http://www.stack.nl/~rem/problem.html

It's a page with 3 big sections: header, middle, footer. I've stripped the footer as far as possible and reduced the header. The footer stays at the bottom of the window/viewport or bottom of the page if the page is longer and requires scrolling.

What problem to look for? The news section to the right, it should have 2 identical blocks (in this example). But it cuts off the second block entirely and cuts the end of the first one. Basically where the form ends on the left side. On reload of the page the error will be "fixed".

By accident I stumbled upon this thread (<- link) where they also seem to discuss the cut off of contents when the regular body text is shorter than the float text. Though for me the problem only appears on the page with the form and not with other pages. They couldn't figure out the trigger or cause either and the thread stopped in 2002. I'm trying that <p></p><p></p> workaround...

If anybody knows some other workarounds or knows what triggers this problem. Feel free and invited to post any suggestion that can solve this matter. Adding more contents text is no option alas.