CODEWITHSUNDEEP
htmlcss
markzzz
markzzz

Reputation: 48035

Why HTML get a mysteriously "margin" at the bottom of the page?

Code is quite easy :

<html xmlns="http://www.w3.org/1999/xhtml">
    <body style="padding:0; margin:0;">
        <form method="post" action="/default.aspx" id="form1" style="margin: 0px; padding: 0px;">
          <div id="container-main" style="background-color:Red; height:1825px; position:relative;">&nbsp;</div>
          <div id="fascia-chiusura" style="background-color:#5CAE22; height:11px; position:relative; width:100%;">&nbsp;</div>
        </form>
    </body>
</html>

But on Firefox/Chrome it gets a strange "space" at the bottom, which is not in the HTML element. Why this behaviour? And how can I fix it?

Screenshot :

enter image description here

Upvotes: 3

Views: 181

Answers (4)

Jasper de Vries
Jasper de Vries

Reputation: 20263

You can also add overflow:hidden to <div id="fascia-chiusura"/>

http://jsfiddle.net/rtVPb/9/

Upvotes: 0

Jack
Jack

Reputation: 1472

There is nothing to do with anything, just remove last div height or change it to auto

http://jsfiddle.net/rtVPb/8/

Upvotes: 0

QQping
QQping

Reputation: 1370

http://jsfiddle.net/rtVPb/4/

Remove the &nbsp; in your last div and it works fine. The space from the &nbsp; is larger than the 11px defined in the div so it creates an overflow and you get a white part. You can check this behaviour here where I added some visible text..

Upvotes: 8

chovy
chovy

Reputation: 75854

http://jsfiddle.net/rtVPb/2/

Remove this:

 <div id="fascia-chiusura" style="background-color:#5CAE22; height:11px; position:relative; width:100%;">&nbsp;</div>

Upvotes: 0

Related Questions