Why Does CSS Float Not Change the Width of the Following Div

Why does CSS float not change the width of the following div?

This is an expected behavior of float positioning.

When an element is floated to the left (in your case the .inline div), the following content flows down the right side of that element, line boxes get shortened BUT the width of the containing block which is established by the following element (in your case the .yellow div) is reserved.

This is documented in the spec:

9.5 Floats

Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist.
However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.

Which means block level elements (such as <div>, <p>, ...)—That are not positioned—ignore the float, whereas line boxes flow along its side.

An example given by W3C:

^[D]

The IMG box is floated to the left. The content that follows is
formatted to the right of the float, starting on the same line as the
float. The line boxes to the right of the float are shortened due to
the float's presence, but resume their "normal" width (that of the
containing block established by the P element) after the float.

Hence if you give the .yellow element a background, you'll see that it spans the container and continues through the floated element.

The solution

From CSS level 2.1 spec:

The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context (such as an element with 'overflow' other than 'visible') must
not overlap the margin box of any floats in the same block formatting
context as the element itself.

Hence if you add an overflow property with value other than visible to the .yellow div, it prevents the div from overlapping the floated element:

EXAMPLE HERE

.yellow {
    overflow: hidden;
}

---

Overlapping makes sense specially in situations where the length of the following content is large enough to continue normally after the floated element.

If it was restricted by default, the content wouldn't be continued under the floated element.

div not floating along the preceding div with float property set to left

A <div> is a block level element which is 100% wide and has a line break before & after when it's within the normal content flow.

Technically, when you float a <div>, you're taking the element out of the normal flow so it no longer has a line-break before & after and also the other page content flows around it.

So why does the second div only position next to the first one when
its width is set or its own float property is set to float left?

Floated <div>'s will always appear side-by-side only if there's enough room to contain them side-by-side. Otherwise, the next floated <div> will wrap to a new line. This is because floated <div>'s are outside the content flow and defined to behave this way in the spec.

However, you've made some incorrect assumptions in your question about what happens when you set the width of the second (non-floated) <div>.

The second <div>, itself, is always underneath (meaning behind) the floated <div>. Whereas, the "content" of the second <div> always flows around the floated <div>. (see three examples below)

So whether or not you set the width of the second div, its content will still flow around the left floated div as you can see illustrated here in three examples. (For illustration purposes, the first <div> is red with 50% opacity and the second is blue with a thick green border.)

• Fiddle with second div wider than first

• Fiddle with no set width (100%) on second div

• Fiddle with second div narrower than first

As you can see from all three examples above, despite the existence of the floated first <div>...

• the second <div> always starts on the left edge of the screen despite the width of the second <div>.

• the second <div> always starts on the top edge of the screen because there's no other page flow content above the second <div>.

• the actual content of the second <div> flows around (to the right of) the floated first <div> only where there is enough room inside its container to allow it to flow around the floated <div>. Otherwise, it appears as if it's starting a new line where really only its content is continuing to flow around the bottom of the floated <div>.

W3C Spec: 9 Visual formatting model, 9.5 Floats

A float is a box that is shifted to the left or right on the current
line. The most interesting characteristic of a float (or "floated" or
"floating" box) is that content may flow along its side (or be
prohibited from doing so by the 'clear' property). Content flows down
the right side of a left-floated box and down the left side of a
right-floated box. The following is an introduction to float
positioning and content flow; the exact rules governing float behavior
are given in the description of the 'float' property.

A floated box is shifted to the left or right until its outer edge
touches the containing block edge or the outer edge of another float.
If there is a line box, the outer top of the floated box is aligned
with the top of the current line box.

If there is not enough horizontal room for the float, it is shifted
downward until either it fits or there are no more floats present.

Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist. However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.

And here are a whole bunch of examples...

W3C Spec: 9 Visual formatting model, 9.8 Comparison of normal flow, floats, and absolute positioning

How to fix width of DIV that contains floated elements?

If I understand you correctly, what you could do is to get rid of the floats, and lay out using display:inline-block. That way, as long as you ensure there are no spaces or newlines between the inner-divs it will be treated as a single word by the layout engine, and will stay on a single line (thus enlarging the containing <div> and/or overflowing if needed. You can use min-width and text-align:center for some stylistic improvements. Spacing between the elements can be created by using margin attributes on the inner <div>s.

Why `float:left` doesn't work with a fixed width?

It seems to me that it is the simple rule that blocks, unless floated, always start a new line. w3.org/TR/CSS2/visuren.html#block-formatting section 9.4.1 –

float:left not working after specifying width

Without knowing the width of your pictures, this is my best "guess" of what your issue is. see fiddle https://jsfiddle.net/ujg77o3r/3/

The top 2 images have width's that are equal to (or can be less then) the width of the container once the 2 images combined are bigger then the 100px the image will go bellow, you can see the second example in the fiddle.

If this is your issue, set the widths of the combined image widths to less then the width of the container.

HTML

<div class="container">
  <div class="unit">
    <img src="http://lorempixel.com/50/50/" />
  </div>
  <div class="unit">
    <img src="http://lorempixel.com/50/50/" />
  </div>
</div>

CSS

.container {
  width: 100px;
  text-align: center;
}
.container .unit {
  position: relative;
  float: left;
}

CSS float right not working correctly

you need to wrap your text inside div and float it left while wrapper div should have height, and I've also added line height for vertical alignment

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
   <div style="float:left;line-height:30px;">Contact Details</div>

    <button type="button" class="edit_button" style="float: right;">My Button</button>

</div>

also js fiddle here =)
http://jsfiddle.net/xQgSm/

CSS Float not floating?

Try to add display: inline-block to the second div, it worked for me. Display default value for divs is "block" which make them display in a new line; by setting it to "inline-block" you'll force it to work as an inline element (span elements are inline, and they render in the same line as the container element).

Is width required to float two divs side by side using float:left property?

... a block element, which will take up the full width it has available to
it.

A non-replaced block element in normal flow will take up the full width it has available to it. This requirement is stated at http://www.w3.org/TR/CSS2/visudet.html#blockwidth

A floated element is not in normal flow, so that rule does not apply. Instead, float widths are determined according to their own rules, stated and described at http://www.w3.org/TR/CSS2/visudet.html#float-width. This says that when a floated element has a computed width of "auto", its used width is determined using the shrink-to-fit algorithm.

Note that the shrink-to-fit algorithm is also used for other types of layout, including non-replaced inline-block elements and table cells, but in other respects, such as vertical alignment, the layout behaviour of those elements is quite different from that of floats.

CSS - element positioning using float does not work

div elements by default have a width of 100% of their parent. Since you floated the lefty div you took it out of the flow so what is happening is that the lefty div is effectively sitting outside the flow of the elements. Also float causes the div to shrink-wrap to the size of it's children. So if you are wanting to set the righty div to but up against the lefty div then you should do two things: first add float:left; position:relative; to the righty styling. Second you should add a div at the bottom of that to clear your floats.

On another note you should only use a class if you are going to be styling multiple elements the same way, otherwise just style the element off of the ID.

  .pages {width: 100%; position: absolute;}
  .leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
  .rightPanel {position: relative; float: left;}

  <div class="page">
    <div id="lefty" class="leftPanel">
      <div class="page">
        <p>helloworld</p>
      </div>
    </div>
    <div id="righty" class="rightPanel">
      <div class="page">
         <p>HELLO WORLD</p>
      </div>
    </div>
    <div style="clear:left;"></div>    
 </div>

Layout of HTML div tags with float property

Block elements are laid out “behind” floated elements, only their inline content floats around the floated elements.

If you want it “under” them, then clear the float.

---

Related Topics