CODEWITHSUNDEEP
csshtmlcss-floatpadding
Only Bolivian Here
Only Bolivian Here

Reputation: 36773

Padding in a div where other divs are floated

Here is the JSFiddle link:

http://jsfiddle.net/stapiagutierrez/48yGU/34/

When I use padding: 10px; on the #middle div, I thought it would make the contained divs inside become smaller to fit the padding.

This is partially true, it's pushed from the top and left/right, but it's overflowing from the bottom.

Any explanation for this, and a solution for this common case? So far, I've used overflow: hidden; but this feels like a hack. But maybe since I'm new to CSS this is how you're supposed to handle it.

Upvotes: 0

Views: 57

Answers (2)

Daniel
Daniel

Reputation: 31609

You need to add clear after the floats like this: http://jsfiddle.net/48yGU/38/
Edit: the reason its overflowing from the bottom is because float does not have size. so the container thinks there is nothing there and just draws the padding on both sides (thats why it looks line height). what clear does is it sticks to bottom of floats and have size, so its pushing the container bottom to the bottom of the floats.

Upvotes: 1

Nick Radford
Nick Radford

Reputation: 1038

It's because the floated DIVS are positioned out of the normal flow, in which padding would normally consider the height and width of contained elements.

Upvotes: 0

Related Questions