HTML fields push other elements
could someone answer me WHY, when I set margin-top for my <div id="logo"> , all other divs pushed down. And why, if the set is float: left before my <div id="logo"> , everything works fine.
the code:
<!DOCTYPE html> <html lang="pt-br"> <head> <title>Olá Mundo!</title> <style> /* CSS RESET HERE */ ( http://html5doctor.com/html-5-reset-stylesheet/ ) body { margin:0; } #container { width:1000px; min-height:100%; height:auto; margin:0 auto; } #header { width:100%; height:160px; background-color:#FF0; } #logo { width:150px; height:150px; margin:10px 0 0 10px; background-color:#F0F; } </style> </head> <body> <div id="container"> <div id="header"> <div id="logo"> <h1>Minha logo!</h1> <h2>meu slogan ...</h2> </div> </div> </body> </html> This is caused by the edge of the field .
Normal document flow
In the case where <div id="logo"> does not float, its top field actually sticks out from the top of its containing element, which repels everything. The reason for this behavior (as stated in the article above) is that if you have a series of paragraphs with the following CSS:
p { margin: 1em 0; } They will only have 1em fields between them instead of 2em (which would be the result if the fields did not crash).
Float Fix
When you float <div id="logo"> , it takes it out of the normal document flow, which means that its top edge no longer collapses with its parent position.
difficult
Other options for fixing a crash in your case are to add 1px upper / lower indentation or a border to your <div id="header"> .
Your h1 has a default margin for them (on safari on my computer it's .67em). This is what makes everyone push down.
to try:
h1{margin:0;} Everything will be fixed.
The reason it works when you are swimming is because it is swimming, so the logo element leaves the normal flow, so it does not affect the positioning of its parents.
In addition, I ALWAYS use reset css to avoid this. YUI reset works very well.