Using clear: both; on block element and margin (margin-top) does not set margin to adjacent block elements

VERIFIED INVALID

Status

()

Core
Layout: Floats
VERIFIED INVALID
15 years ago
15 years ago

People

(Reporter: Markus Fischer, Unassigned)

Tracking

Trunk
x86
Windows 2000
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

15 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3a) Gecko/20021212
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3a) Gecko/20021212

The page uses three <div> tags with float: left; and one <div> tag (call it
footer) with clear: both; . If I now add a margin-top to the footer div (e.g.
25px;) the "footer" <div> is not moved away from the adjacent columns divs but
ALL <divs> are moved 25px; from the top of the page.

Suspecting a problem with clear: both; and margin-top .

Reproducible: Always

Steps to Reproduce:
1. Load the page in the browser

Actual Results:  
The "footer" <div> is next to the middle column <div>. All <div>s are moved from
the top down by 25px.

Expected Results:  
The "footer" <div> should be moved away from the middle column <div> by 25px; .

Comment 1

15 years ago
I think it is not a bug, but a correct behaviour. Let us check manual:

http://www.w3.org/TR/REC-CSS2/visuren.html#q28.

There is stated, that: "If there isn't enough horizontal room on the current
line for the float, it is shifted downward, line by line, until a line has room
for it". "Clear: both" is still flowing element, so if you put margin-top: some
value on it, you shift "floating line" for each element of flow.

It is mean, that all 4 you <div> elements are "linked" with this invisible
float-line, so put margin-top you put down this float-line.
The key point is in http://www.w3.org/TR/REC-CSS2/visuren.html#flow-control ,
which describes how 'clear' works.  It works by increasing the top margin of the
element being cleared so that it clears past all floats.  Thus this is correct
behavior.  (Note that if there is a bottom margin on the float you'll end up
with a gap.)

Marking as invalid, since this is not a Mozilla bug.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 15 years ago
Resolution: --- → INVALID

Comment 3

15 years ago
v.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.