Forum Moderators: not2easy
I am having issue with background color not showing through a nested div after a certain height in Firefox.
The background-color is associated with the wrapper div and there is a nested content div inside.
It is necessary to keep the background-color in the wrapper div because there are other navigation divs inside it.
The color is not coming through the content div after a certain height. I need the height to stretch with the dynamic content. I have already tried height:100% and as I have seen on this forum it does not work.
I am new to css layout.
Is this approach flawed? Or there an easy solution?
There is a wrapper div defined by:
#wrapper
{
position: absolute;
top: 68px;
bottom: 0px;
padding:3px;
width: 708px;
background: #ffffff;
}
This content div is nested inside the wrapper.
#content
{
padding: 6px 22px 18px 22px;
border: #767776 1px solid;
width:518px;
}
Thanks
Your problem is the bottom: 0;:
#wrapper {position: absolute; top: 68px; bottom: 0px; padding:3px; width: 708px; background: #ffffff;
}
position: absolute; removes the div from the normal flow and fixes its position relative to its container (unsure about the rest of your code but as shown that means relative to <body> and the viewport. The bottom: 0; stops the wrapper at the bottom of the screen allowing the content div to overflow without the wrappers background colour.
Solutions:
* One: remove bottom: 0; and let the wrapper div expand.
Note: with position: absolute; you should be specifying a left or right position as well as the top - in this instance it appears to be defaulting to left: 0; but that is not necessarily guaranteed in every instance.
* Two: change position: absolute; to position: relative;
Note: This may not be viable in your instance depending upon other code.
* Three: float both containers. Again perhaps not workable depending on surrounding code.
A few ideas to get you started. I also suggest you read and get to understand CSS 2 Visual Formating:
[w3.org ]
and then experiment to realise and understand cross-browser display differences.
