Home/ Questions/Q 6233361
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T10:17:08+00:00

Here is the JSFiddle link: http://jsfiddle.net/stapiagutierrez/48yGU/34/ When I use padding: 10px; on the #middle

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0