Question

I have setup a container and three divs inside. First two are floated and third one is not floated. (fourth div is added just to elaborate my question)

I have changed border of first two divs to be transparent to depict it more clearer that thirdDiv is starting right from the firstDiv while placing content of itself (‘THIRD’) right after secondDiv.

Content of thirdDiv (‘THIRD’) is placed right after secondDiv

And you can see that thirdDiv is actually have border started right from the start

So, my question is that do next to floated element (thirdDiv) gets padding from that direction by default? As it showing to be 155px in my code.

Answer 1

No, the nonfloated elements don’t get padding by default. the container starts underneath your floated divs. However, the content in the div respects the float and is pushed to the right. If you apply overflow:hiddento the non-floated container, then it has an “automatic margin”, respecting the floated divs. (You can see this here – the left border appears.)

EDIT: effectively it is like a padding, although there is no padding!

Example with overflow hidden.

Example without overflow hidden and no padding

Example without overflow hidden and padding left

note the border and the placement of the extra text!

EDIT 2: depending on what the greater value is, either the padding defined by your css, or the calculated padding (width of the floats) is being applied. In every case, your defined padding and the “calculated-float-padding” do collapse!