Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Page Wrap doesn't grow Reply To: Page Wrap doesn't grow

#200949
jakecarpenter
Participant

@shaneisme, the clear: both; is on the correct element. It’s the only reason the #wrap has the height of the floating #one. I’ll admit that the use of an extraneous element to contain a float is ugly and bad practice. The cleafix method is decent but so is changing the block formatting context with overflow.


@restfulsilence
, as Paulie points out, relative positioning retains the element’s normal position in the document flow and only moves it visually relative to that position – it has no effect on other elements. The best way to accomplish what you want is with top margin (not sure why you want to avoid it) or top padding on the parent. Normally the top margin of a child will extend outside of its parent unless the parent has a top padding or border, or in my example, if the parent has new block formatting context (not vitally important to know other than overflow: hidden will set this).

https://codepen.io/anon/pen/gpOWmj