CSS- Containg div not expanding to meet 'contained' div's size in firefox
Posted on 2007-08-06
PROBLEM: WRAPPING DIV NOT EXPANDING TO MEET THE SIZE OF THE CONTENT CONTAINED IN ANOTHER DIV WITHIN THE WRAPPER.
I am designing a website, pure CSS layout, which is giving me a little grief. Everything was working, or so i thought, until i added some more content to a page. I have a "gutter" wrapping div which was going to pad out the contents inside and have a border around it. The contents were in another div inside the gutter. The idea was that the gutter would scroll to fit the size of the content, but it doesnt. If the content is bigger than the minimum height i set for the gutter, the gutter still stays the same size, the contents just get overlayed on top of it.
This is only happening in FIREFOX, IE7 is fine. Is there a way to fix this???
GUTTER CSS CODE:
border-left: 1px solid #000;
background:white url(../Graphics/bgContent.png) no-repeat top left;
EXAMPLE OF HTML:
<li class="header">HEADER HERE</li>
<li class="main"> CONTENT HERE</li>
So in the example above, if i write lots of content into the "main" section of the UL with the id of "contentLayout", it will break the gutter2 box!
Any help would be greatly appreciated. Thanks