0

I've got a "main" part of my web page that is supposed to contain all the main elements. The child elements are all displaying correctly, but the main part is displaying 2px tall, so I can't control the background color.

Have a look here:

http://lmpcoatings.com

I've highlighted the main section by giving it a red border so you can see what I mean.

I've tried setting its style to display:block but that didn't work.

Eamonn Gormley
  • 2,200
  • 4
  • 16
  • 19
  • http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing – sinisake Dec 28 '14 at 22:39

1 Answers1

1

This relates to floats used to build your layout. This usually takes off elements out of the document flow. You need to clear the floats. One way to solve this is to use overflow:hidden on your main element, which will make "main" aware that it has children and to calculate its height to accomodate this.
Another way would be to create an empty element as a last child of main and use clear:both|left|right property to clear the floats.
You need to pickup which one is better for you.

robjez
  • 3,514
  • 3
  • 29
  • 34