CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 10380

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>

Upvotes: 0

Views: 24

Answers (1)

Nathan Dawson
Nathan Dawson

Reputation: 19308

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;
}

Upvotes: 1

Related Questions