Home/ Questions/Q 4060048
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T15:17:18+00:00

here a minimum version to reproduce the failure: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0

  • 0

here a minimum version to reproduce the failure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <style type="text/css">
        .clear{clear:both;}
        .col{float:left;}
        .row{margin-bottom:30px;background-color:red;}
    </style>
</head>
<body>
    <div class="row">

        <div class="col">Lorem Ipsum</div>
        <div class="clear"></div>
    </div>
</body>
</html>

It is a Bug of Firefox or I misunderstand something.
Edit:
Forgot to explain the Problem. When im using margin-bottom for the .row in combination with a float in .col Then the element will be dropped down for the same value as the .row margin-bottom has

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not entirely sure why Firefox is behaving differently to other browsers here. It is something to do with collapsing margins.

    However, you can easily fix it (no moving down in Firefox, consistency between browsers) by:

    • Adding overflow: hidden to .row as an alternate way to clear the float.

    You can then remove the <div class="clear"></div> because it’s no longer required.

    • 0