how to increase height of a floating element according to its parent?

[Funkaholik]

Broke my head already
need help with this ish
why aside won’t grow height automaticaly relative to section or main?
what i’m missing?

i found that display: table; for main and without floats will do the thing
but then child elements has different height even thought should has the same

[Beverleyh]

display: table; works as long as you use the correct display for child elements, which would be table-cells http://codepen.io/anon/pen/JErNeM

There are lots of other ways to achieve equal height columns – see here https://css-tricks.com/fluid-width-equal-height-columns/

[Funkaholik]

yep .. but i need some extra top margin for aside
i know it’s a bit old but i’ve started when flex was already in the game))

[Beverleyh]

Put a div inside aside and put a top margin on that instead.

[Shikkediel]

http://stackoverflow.com/a/16398904/3168107

If it’s only for a visible gap at the top (and not actual displacement), you could also do this:

aside {
  display: table-cell;
  background: pink;
  width: 25%;
  height: 100%;
  padding-top: 10px;
  background-clip: content-box;
}

[Author]

Posts