Home/ Questions/Q 8138029
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T11:22:03+00:00

http://zergxost.com/test.html As you can see, if there’s not enough text, the bottom gray line

  • 0

http://zergxost.com/test.html

As you can see, if there’s not enough text, the bottom gray line goes way higher than it should. Can someone please explain why doesn’t “article”‘s hitbox include the “header”? And how ti fix it? Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re missing a either a overflow: hidden or a clear: left declaration. You should always clear floating objects or declare overflow to be hidden (carefully!).

    article {
  overflow: hidden;
}

    Or:

    div#wrapper div.related {
  width: 100%;
  height: 960px;
  border-top: 1px solid #808080;
  margin-top: 20px;
  clear: left;
}

    Why/how overflow: hidden works

    When you set a block-level element to have overflow: hidden, you’re actually telling the browser change how it handles block elements. Functionally, you told the browser to contain normal elements (including floated ones). Things that will exceed the total dimensions of the box, usually by relative/absolute positioning, or images with huge widths, will get clipped to the wrapper’s width. Drop down regions that cross over a container with overflow: hidden may cause them to get clipped as they enter as well.

    Elements at the end of a overflow: hidden container will also have padding-bottom and margin-bottom applied.

    Another answer: https://stackoverflow.com/a/3416217/24950

    • 0