CODEWITHSUNDEEP
htmlcsscss-float
Moshe
Moshe

Reputation: 58097

How do I get a div to wrap around floating children?

Considering the following code, where the span elements are floating inside of the div, how can I make the div wrap around the floating child elements, so that the 1px border wraps the children elements?

<div style="border:1px solid #000">
  <span style="float:left">Content</span>
  <span style="float:left">Content</span>
  <span style="float:left">Content</span>
</div>

Upvotes: 7

Views: 11412

Answers (2)

user1463368
user1463368

Reputation: 21

Use the clear CSS property according to MDN web docs: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Note: If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, you need to self-clear its children. This is called clearfix, and one way to do it is clear a replaced ::after pseudo-element on it.

#container::after { 
  content: "";
  display: block; 
  clear: both;
}

Upvotes: 1

Lee
Lee

Reputation: 13542

Most of the time, adding overflow:hidden on the wrapper is sufficient:

<div style="border:1px solid #000; overflow:hidden;">
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
</div>

Sometimes, you'll see this alternate approach (which is much more hacky, but probably has better back-version browser support).

<div style="border:1px solid #000; ">
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
    <span style="float:left">Content</span>
    <div style="clear:both;"></div>
</div>

Upvotes: 23

Related Questions