CSS: float: right does not expand container

Question

When I expand comment body that is floated to right my container does not expand with it. How can I fix this?

Parent containers never expand to contain floated elements without additional CSS properties. — Rob, Jul 31 '11 at 15:29

score 24 · Accepted Answer · answered Jul 31 '11 at 15:26

24

Add overflow: hidden to the container so it can contain the float:

.comment
{
    width: 960px;
    margin: auto;
    margin-top: 24px;
    font-size: 14px;
    background-color: #777777;
    overflow: hidden;
}

answered Jul 31 '11 at 15:26

BoltClock

1

...I was using tables for years to avoid that :( – Peter Aug 12 '11 at 00:07
2

@seebiscuit: http://stackoverflow.com/questions/12783064/why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t – BoltClock Aug 18 '16 at 18:20

score 2 · Answer 2 · answered Jul 31 '11 at 15:30

2

Check this out.

You need to clear the float at the end of the comment box

answered Jul 31 '11 at 15:30

Ahmad Alfy

1

Shouldn't it rather be style="clear: both;" instead of clear="both"? – MazeChaZer May 14 '14 at 19:42
1

Using clear as an HTML attribute is deprecated and has been for years. Use the solution proposed by @MazeChaZer instead. See the clear attribute reference [here](http://www.sitepoint.com/web-foundations/clear-html-attribute/) – Simon Robb Sep 16 '14 at 14:32

score 0 · Answer 3 · answered Nov 03 '22 at 17:40

0

The modern way to solve this would be to add display: flow-root; to the container in order to establish a new block formatting context.

overflow: hidden also establishes a new block formatting context but with its obvious side effects.

answered Nov 03 '22 at 17:40

Robbendebiene

3 Answers3