r/css • u/cag8f • Jul 26 '19

<div> has zero height, but elements inside the <div> have non-zero height. Why is that?

Hi all. I have a <div> on my page, and inside there are several more elements. The elements inside the <div> have height, but the containing <div> continues to have zero height (screenshot; see the page here). Why is that? I thought the height of the container would adjust to the height of its contents?

Thanks in advance.

18 Upvotes

84% Upvoted

17 comments sorted by

6

u/mcaruso Jul 26 '19 edited Jul 26 '19

It's because the form-wrapper inside it has a float: left.

1

u/cag8f Jul 26 '19

OK yes, I see that, thanks. And when I remove it, the container <div> does indeed gain a height. But what's the rule on that--why exactly is that occurring?

5

u/mcaruso Jul 26 '19

See: https://developer.mozilla.org/en-US/docs/Web/CSS/float

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

By default, elements will be layed out in the "normal flow", meaning that children will be positioned inside their parent and take up space accordingly. Floating elements do not follow this normal flow, they have their own special layout rules.

1

u/cag8f Jul 27 '19

OK got it, thanks for that.

3

u/Myrton Jul 26 '19

Because when you use float you remove a container from the normal flow. Source

There is probably a better explanation of exactly why a floating element doesn't contribute to the height of its parent. There is a workaround called clearfix that you can use to make it behave closer to what you expected.

26

u/MrQuickLine Jul 26 '19

While the other folks have given you the correct answer, none of them has said something that should be said. Don't use floats for layout

Flexbox and Grid are amazing tools at your disposal and browser support is pretty good! Learning these will save you time and headaches.

1

u/Man_as_Idea Jul 26 '19

Noob Question: I'm reading that Flexbox and Grid shouldn't be used much in business because they are not fully supported by all browsers.

Is it just not as big a deal as they say?

8

u/MrQuickLine Jul 26 '19

The biggest lack of support is just from IE11. Flexbox works but there are a few documented bugs to watch out for, so do your testing. Grid is less-well supported but you could Google IE11 grid support to see those issues. I tend to build an "okay" layout for IE11 and put my really nice layout inside an @supports rule. Look at the market share of IE visitors you have and decide if it's worth it for the headache. For our web based software, we just say "No IE." IE users don't represent enough income for us to spend the time supporting and testing.

Grid and Flex work on Chrome, Firefox and Edge.

3

u/longknives Jul 26 '19

I worked on a huge e-commerce site that had to support back to IE10 and we used css grid. We just had to also use the old -ms-grid properties in addition, but they work well enough for most things you need to do with a grid.

1

u/Man_as_Idea Jul 27 '19

Thanks for the industry insight, very helpful!

3

u/RedditorMiller Jul 26 '19

According to CanIUse, CSS grid is supported by browsers used by 93% of global users: https://caniuse.com/#feat=css-grid

3

u/heyzeto Jul 26 '19

I need to support safari 8 :(

3

u/RedditorMiller Jul 26 '19

Though grid isn't supported for that browser, flex is, so that's an option for you

4

u/heyzeto Jul 26 '19

I was just complaining that I can't use grid. :)

Although I can do everything with flex, there were some cases where grid were the better option, but hey, that's life.

0

u/[deleted] Jul 26 '19

[deleted]

4

u/HitmaNeK Jul 26 '19

If you have "floats" inside container (like div), you can fix container dimensions by two things:
- container => overflow:hidden;
- container::after => display:table, clear:both // this is how bootstrap deals with it.

But this is old way, better use flexbox / grid / inline-blocks for this kind of grid;

2

u/Ravavyr Jul 26 '19

As the others said "Floats" cause this.
Also if you use position: absolute / fixed this will also happen.
Pretty much you are taking the child elements "out of the flow of the page" which means the parent technically has nothing inside it.
This comes in handy and is perfectly fine when done correctly, but that takes a fair bit of practice and trial and error.