270480 - DIV does not take up entire horizontal band

Status: RESOLVED INVALID

(Core :: Layout: Floats, defect)

Description

[Minh Lee Goon]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

When there are multiple DIVs nested within each other, the DIVs are not placed
correctly. The DIV is supposed to take up the entire horizontal band on the
browser window, unless the FLOAT style is defined. At
http://www.goonies.info/Digerati/News/, the Firefox and ColdFusion buttons are
supposed to be at the bottom of the page along the same horizontal band as the
disclaimer information. Here's how the DIVs are laid out now:

<div id="Container">
    <div id="Header"></div>
    <div id="Navigation"></div>
    <div id="Content"></div>
    <div id="Footer">
        <div id="Buttons"></div>
        <div id="Disclaimer"></div>
    </div>
</div>

In Firefox, the buttons are immediately under the navigation links.

Reproducible: Always
Steps to Reproduce:



Expected Results:  
The buttons should be at the bottom of the page along the same horizontal band
as the disclaimer information.

Comment 1

[Mats Palmgren (inactive)]

"Navigation" is float:left
"Content" is float:right
"Footer" is normal flow
  "Buttons" is float:left
  "Disclaimer" is float:right

Checking against the rules specified by CSS 2.1:
http://www.w3.org/TR/CSS21/visuren.html#float-rules

1. the left outer edge of "Buttons" is not outside "Footer"
2. the top of "Buttons" is below the bottom of "Navigation"
3. none of the boxes overlap
4. the top of "Buttons" is below the top of "Footer"
5. the top of "Buttons" is below the top of "Content","Navigation"...
6. the top of "Buttons" is below the top of the line-box created by "Footer"
7. "Buttons" does not have a float to its left so the rule does not apply
8. "Buttons" must be placed as high as possible (without breaking above rules)
9. "Buttons" must be as far left as possible (without breaking above rules)

The rules are the same in CSS3 but better explained:
http://www.w3.org/TR/2002/WD-css3-box-20021024/#float-rules

-> INVALID