1

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.

Dwarf Vader
  • 429
  • 1
  • 5
  • 14
  • Please post the code on here. We should not have to search your site for what you are referring to. It may also be helpful to create a [jsfiddle](http://jsfiddle.net/) that shows the problem. – Josh Mein Jun 27 '12 at 17:21
  • Quick note - I can't set min-height because the header is always different in height and content. – Dwarf Vader Jun 27 '12 at 17:21
  • Okay: http://jsfiddle.net/DwarfVader/NacvS/ My webpage is actually pretty small, but if this makes it easier for you, then sure, here it is :P – Dwarf Vader Jun 27 '12 at 17:24
  • @DwarfVader - Providing a JSFiddle is just a good way to "future proof" your post on StackOverflow. That way if your site moves or changes in the future, people will still be able to refer back to your code. – Ryan Jun 27 '12 at 17:37

2 Answers2

2

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

Community
  • 1
  • 1
Robert K
  • 30,064
  • 12
  • 61
  • 79
  • Thank you! Yes, clear:left; worked for me. I shall learn about clears and floats, it seems. – Dwarf Vader Jun 27 '12 at 17:28
  • I should have mentioned the option of using `overflow:hidden;` as well. Good call, Robert! – Ryan Jun 27 '12 at 17:32
  • @DwarfVader Try the `overflow: hidden` declaration too. It can "contain" a float, but can cause issues when an element is floating over top of it (with `position: absolute`). But both have good uses. – Robert K Jun 27 '12 at 17:32
  • @Ryan Thanks. It does have it's occasional quirks though. – Robert K Jun 27 '12 at 17:33
  • Yes, they do! And I utilizing both already. A little question, though (if I may) - what exactly does overflow:hidden; do in this occasion? Why doesn't it cut off the header? – Dwarf Vader Jun 27 '12 at 17:37
1

You need to clear div#wrapper div.related. Try adding the following to your CSS:

div#wrapper div.related {
    clear: both;
}
Ryan
  • 2,433
  • 5
  • 31
  • 41