Why doesn't a fixed-width element take up the space beside a floated element?

Question

In this CodePen, the <aside> element wraps the <article> element.

But if you apply a width to the <aside> element (i.e. uncomment width: 50px;), the <aside> jumps to a new row, even though there is enough space to sit alongside the <article> element.

Why doesn't the element sit alongside a floated <article> when space is available?

section {
  width: 800px;
}

article {
  float: left;
  width: 500px;
  background: #ffffcc;
}

aside {
/*   width: 50px; */
  background: #ccffcc;
}

<body>
  <section>
    <article>[[Text]]</article>
    <aside>[[Text]]</aside>
  </section>
</body>

Are you expecting it to wrap when you set the 50px width? I don't understand what you're asking. — j08691, Apr 04 '17 at 15:19
Yes, I'm wondering why it no longer wraps once you set the width. — Nitin Savant, Apr 04 '17 at 15:25
it wraps because as a block element, when you don't give it a width, it will take 100% width, when you give it a width, that plus the other width is less than 100% so it doesn't wrap — Pete, Apr 04 '17 at 15:26
You've restricted the width of the aside, and it's not wider than the article before it, so there's no space for it to render around it. — j08691, Apr 04 '17 at 15:26
Ok I understand what's happening but don't understand why. Do you have a reference with deeper information that I could review? Also, I reworded the question a bit. — Nitin Savant, Apr 05 '17 at 14:26
This is a duplicate of http://stackoverflow.com/questions/40264773/understanding-css-float, except with a much better title. I'm conflicted. — BoltClock, Apr 05 '17 at 17:52

score 2 · Accepted Answer · edited May 23 '17 at 12:02

Making the <article> semitransparent reveals what is actually happening when the width of the <aside> is auto:

section {
  width: 800px;
}

article {
  float: left;
  width: 500px;
  background: #ffffcc;
  opacity: 0.5;
}

aside {
/*   width: 50px; */
  background: #ccffcc;
}

<body>
  <section>
    <article>[[Text]]</article>
    <aside>[[Text]]</aside>
  </section>
</body>

That's right: the <aside> element's box stretches horizontally to fill the <section>, disregarding the floating <article> altogether. It's the text within the <aside> that wraps around the <article>, not the box.

So by giving the <aside> a width that is much less than that of the floating <article>, there is in fact no room for the text to sit next to the <article>! This results in the text moving downward instead, since text will always prefer flowing downward to overflowing horizontally. This actually causes the <aside> element's box to increase in height, which can be seen when, again, you make the <article> semitransparent:

section {
  width: 800px;
}

article {
  float: left;
  width: 500px;
  background: #ffffcc;
  opacity: 0.5;
}

aside {
  width: 50px;
  background: #ccffcc;
}

<body>
  <section>
    <article>[[Text]]</article>
    <aside>[[Text]]</aside>
  </section>
</body>

So why doesn't the in-flow <aside> box itself become narrower or shift downward in response to the float? That's simply because floating takes an element out of the flow. And that's why the initial layout of the <aside> disregards the <article> altogether.

Why does the text wrap around the float, then? Because the entire point of floats is to have text wrap around a floating object, much like how the point of having text at all is for people to read it.

Everything I've described above is covered in section 9.5 of the spec.

Note that this only applies when the <aside> is an in-flow block box that doesn't establish a block formatting context. If you float the <aside> too, obviously it will sit right next to the <article>, since then you have two floats, and two floats will naturally line up with one another.

And if you apply overflow: hidden, causing the <aside> to establish a block formatting context, then it does sit next to the <article>, even though it's not floating (in fact, this prevents the text from wrapping around the float altogether):

section {
  width: 800px;
}

article {
  float: left;
  width: 500px;
  background: #ffffcc;
}

aside {
  width: 50px;
  background: #ccffcc;
  overflow: hidden;
}

<body>
  <section>
    <article>[[Text]]</article>
    <aside>[[Text]]</aside>
  </section>
</body>

While floats never intrude into other block formatting contexts by nature, the fact that overflow: hidden causes this is an unintuitive side effect that has a bit of history behind it.

Why doesn't a fixed-width element take up the space beside a floated element?

1 Answers1

Linked