Robert Rocha Robert Rocha - 4 years ago 62
HTML Question

Overflow hidden causes child elements to appear on own line

The

overflow: hidden
in
.container
causes the
p
tag to sort of drop down onto it's own line instead of wrapping around. Why is this?



.container {
background-color: green;
overflow: hidden;
}

.floated {
float: left;
background-color: cyan;
}
p {
background-color: pink;
}

<div class='container'>
<div class='floated'>
Floated Div
</div>
<p>Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p>
</div>




Answer Source

The extra spacing you're seeing comes from the paragraph margins and the way they're treated.

When adding overflow: hidden; to the container you're creating a block formatting context. The margins of the paragraph element will be contained within .container.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

To align the paragraph with your floated element, remove the paragraph element's top margin:

p {
    background-color: pink;
    margin-top: 0;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download