How come my float elements aren't within their parent

Question

So basically i have this wrapper div, and all the elements inside it are floated elements. Only thing is the border of the wrapper div does not include the floated elements in it. Example:

<div id = "wrapper>
   <div id = "content"></div>
</div>

heres the css:

#wrapper
{
   width:         1000px;
   margin-left:   auto;
   margin-right:  auto;
   border:        1px solid;
} 

#content
{
   border:        1px solid;
   width:         850px;
   height:        400px;
   display:       block;
   float:         left;
}

Basically #content is not enclosed within #wrapper's border, but still aligns within it, why is this?

possible duplicate of [Which method of 'clearfix' is best?](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) — Pekka, Jan 08 '11 at 00:29
Awesome, thanks a bunch. But the last response was an easier way to explain. — dave, Jan 08 '11 at 00:46

score 3 · Accepted Answer · edited May 23 '17 at 12:21

3

You need to "clearfix" the container div.

Floated elements are not considered when calculating the dimensions of a container, however there are several workarounds to get what you want.

The Simplest

Just add a div like this one as the last child in your container div:

<div style="clear:both"></div>

As @Pekka comments there are many other ways to achieve the effect (without extra markup) listed in this SO question:

What methods of ‘clearfix’ can I use?

edited May 23 '17 at 12:21

Community

1
1

answered Jan 08 '11 at 00:30

Marcus Whybrow

19,578
9
70
90

Since that div may have a height, and since it requires adding an extra element to the document, this method is generally not preferred. – Quentin Jan 08 '11 at 00:36
@David True, I prefer using a clearfix class, but that obviously requires a bit of setup. – Marcus Whybrow Jan 08 '11 at 00:38
Maybe not preffered, but it solved the problem perfectly. So what is the other preferred method in simple terms? – dave Jan 08 '11 at 00:47
@dave A class which you apply to the container which uses CSS to insert some content after the container which will pull its height over the floated children. This is prefered as it keeps your markup source code semantically happy (i.e. no divs present which represent nothing of the content). – Marcus Whybrow Jan 08 '11 at 00:49
@dave `overflow: hidden` as I said in my answer – Quentin Jan 08 '11 at 00:53
@David Is that just a safety, to ensure that you notice when the height is not correct? – Marcus Whybrow Jan 08 '11 at 00:56
@Marcus — no, it causes the height (so long as it is set to `auto`) to expand to wrap the floated descendents. – Quentin Jan 08 '11 at 00:59
@David Really! That seems like the best possible solution, I a surprised I have not heard of it. – Marcus Whybrow Jan 08 '11 at 01:02

Quentin · Answer 2 · 2022-05-05T14:50:05.173

Because the point of float is to allow you to do things like

have an image span multiple paragraphs

If you want to arrange elements in a row (with optional wrapping), then look to use Flexbox instead. It is a layout tool designed for that.

div {
    display: flexbox;
    border: 2px solid blue;
}

img { 
    margin: 3px; 
}

<div>
  <img src="https://placekitten.com/100/100" alt="">
  <img src="https://placekitten.com/100/200" alt="">
  <img src="https://placekitten.com/200/100" alt="">
  <img src="https://placekitten.com/150/150" alt="">
  <img src="https://placekitten.com/75/100" alt="">
  <img src="https://placekitten.com/100/75" alt="">
  <img src="https://placekitten.com/75/75" alt="">
  <img src="https://placekitten.com/105/95" alt="">
</div>

If floats are the right tool for your use case, then Ed Eliot describes a large collection of different ways to make a container expand to contain it's floating children. I generally recommend setting overflow: hidden on it (to establish a new block formatting context).

div {
    overflow: hidden;
    border: 2px solid blue;
}

img { 
    float: left;
    margin: 3px; 
}

<div>
  <img src="https://placekitten.com/100/100" alt="">
  <img src="https://placekitten.com/100/200" alt="">
  <img src="https://placekitten.com/200/100" alt="">
  <img src="https://placekitten.com/150/150" alt="">
  <img src="https://placekitten.com/75/100" alt="">
  <img src="https://placekitten.com/100/75" alt="">
  <img src="https://placekitten.com/75/75" alt="">
  <img src="https://placekitten.com/105/95" alt="">
</div>

Adding to this: A floated element adds no height/width to its parent. So if the floated `div` is the only thing in the parent `div`, the parent div will be 0x0 pixels. — keithjgrant, Jan 08 '11 at 00:34

How come my float elements aren't within their parent

2 Answers2

The Simplest

Linked

Related