CODEWITHSUNDEEP
htmlcss
Dwarf Vader
Dwarf Vader

Reputation: 429

Can someone explain me why isn't <article>'s size correct and how to fix it?

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.

Upvotes: 1

Views: 36

Answers (2)

Robert K
Robert K

Reputation: 30328

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

Upvotes: 2

Ryan
Ryan

Reputation: 2503

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

div#wrapper div.related {
    clear: both;
}

Upvotes: 1

Related Questions