Removing an element that is floated inside a parent element with other floated and non-floated siblings in Chrome

Question

Removing an element that is floated inside a parent element with other floated and non-floated siblings in Chrome

Can someone help me with this code issue?

<!doctype html>
<title>Test case</title>
<div style="float: left">
    <div style="float: left;">Short.</div>
    <div></div>
    <div style="overflow: hidden;">ALongText.</div>
</div>

I am facing an unexpected result in Chrome (44.0.2403.107 m), It displays like:

Short.ALon

I thought the parent div would adjust to contain all three children elements:

Short.ALongText.

Alternatively, I expected the third div to be pushed down as it does not fit within the container:

Short.
ALongText.

Any idea why Chrome is cutting off the div?

Please note that the width of the parent element matches the "natural size" of the last child div, excluding the floating child.

html css google-chrome

Answer 1

Answer №1

The parent Div is not adjusting to accommodate all three children because it is floated to the left. When an element is floated without a specified width, it will take on the maximum width of its child elements. In this case, the last child element has the widest width. I have provided some examples below to demonstrate this concept more clearly. Click here to view the examples

<div style="color:black"><!-- No float-->
<div style="float: left;">Short.</div>
<div></div>
<div style="overflow:hidden">ALongText.</div>
</div>

 <div style="float:left;color:red"><!-- First element has max width -->
<div style="float: left;">ALongText.</div>
<div></div>
<div style="overflow:hidden">Short.</div>
</div>

 <div style="float:left;color:green"><!-- Second element has max width -->
<div style="float: left;">Short.</div>
<div></div>
<div style="overflow:hidden">ALongText.</div>
</div>

Answer 2

The parent Div is not adjusting to accommodate all three children because it is floated to the left. When an element is floated without a specified width, it will take on the maximum width of its child elements. In this case, the last child element has the widest width. I have provided some examples below to demonstrate this concept more clearly. Click here to view the examples

<div style="color:black"><!-- No float-->
<div style="float: left;">Short.</div>
<div></div>
<div style="overflow:hidden">ALongText.</div>
</div>

 <div style="float:left;color:red"><!-- First element has max width -->
<div style="float: left;">ALongText.</div>
<div></div>
<div style="overflow:hidden">Short.</div>
</div>

 <div style="float:left;color:green"><!-- Second element has max width -->
<div style="float: left;">Short.</div>
<div></div>
<div style="overflow:hidden">ALongText.</div>
</div>

Answer 3

Answer №2

You have the option to remove the empty DIV

<title>Test case</title>
<div style="float: left">
    <div style="float: left;">Short.</div>
    <div style="overflow: hidden;">ALongText.</div>
</div>

Alternatively, you can add 'float:left' to the same DIV

<div style="float: left">
    <div style="float: left;">Short.</div>
    <div style="float: left;"></div>
    <div style="overflow: hidden;">ALongText.</div>
</div>

Answer 4

You have the option to remove the empty DIV

<title>Test case</title>
<div style="float: left">
    <div style="float: left;">Short.</div>
    <div style="overflow: hidden;">ALongText.</div>
</div>

Alternatively, you can add 'float:left' to the same DIV

<div style="float: left">
    <div style="float: left;">Short.</div>
    <div style="float: left;"></div>
    <div style="overflow: hidden;">ALongText.</div>
</div>

Answer 5

Answer №3

Citing from http://www.w3.org/TR/CSS21/visuren.html#block-formatting:

Floats and block boxes with 'overflow' other than 'visible' create new block formatting contexts for their contents.

Within a block formatting context, boxes are arranged one after another vertically from the top of a containing block. The vertical spacing between sibling boxes is controlled by the 'margin' properties. [...]

Within a block formatting context, each box's left outer edge aligns with the left edge of the containing block [...]. This rule applies even when floats are present [...], unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

The third box creates a new context, so according to the linked section:

[...] an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') should not overlap the margin box of any floats in the same block formatting context. If necessary, implementations should adjust the placement of the element to avoid overlap with preceding floats, but may position it alongside the floats if there is enough space. They have the option to reduce the width of the element's border box contrary to what is specified in section 10.3.3. CSS2 does not specify the conditions under which a UA can place the element next to the float or how much the element can be narrowed.

In this particular scenario, Chrome chose to narrow the element instead of clearing it. One way to influence Chrome's behavior is by removing the second div or adjusting the padding of the third element.

Answer 6

Citing from http://www.w3.org/TR/CSS21/visuren.html#block-formatting:

Floats and block boxes with 'overflow' other than 'visible' create new block formatting contexts for their contents.

Within a block formatting context, boxes are arranged one after another vertically from the top of a containing block. The vertical spacing between sibling boxes is controlled by the 'margin' properties. [...]

Within a block formatting context, each box's left outer edge aligns with the left edge of the containing block [...]. This rule applies even when floats are present [...], unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

The third box creates a new context, so according to the linked section:

[...] an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') should not overlap the margin box of any floats in the same block formatting context. If necessary, implementations should adjust the placement of the element to avoid overlap with preceding floats, but may position it alongside the floats if there is enough space. They have the option to reduce the width of the element's border box contrary to what is specified in section 10.3.3. CSS2 does not specify the conditions under which a UA can place the element next to the float or how much the element can be narrowed.

In this particular scenario, Chrome chose to narrow the element instead of clearing it. One way to influence Chrome's behavior is by removing the second div or adjusting the padding of the third element.

Removing an element that is floated inside a parent element with other floated and non-floated siblings in Chrome

Answer №1

Answer №2

Answer №3

Similar questions

When setting the margin to auto, it perfectly centers elements on servers and IE, but on Chrome off the server, it appears to be aligned to the

Difficulty maintaining consistent line widths while setting up a CSS border grid on a table

Just a snippet of a webpage shown

Creating an error message display function using HTML and JavaScript when incorrect input is detected

What is the method for a HTML button to trigger the execution of a Selenium (Java) code located in a remote location through a

A step-by-step guide on injecting HTML code dynamically within a Django application

Incorporate a curved progress line into the progress bar

Locking Bootstrap 4.3 Navbar at the Page's Summit with a See-Through Effect

Fixing the bug in the circle text animation

The header that sticks on scroll is annoyingly blocking the content

I'm looking to redirect a 404 page in my PHP code - where is the best place to do so?

Creating a Date Computation Tool that Adds Additional Days to a Given Date

Only the initial external CSS ID is functional, while the second one is inactive

What is the best way to implement the Active list element feature in my menu bar?

When clicking on an HTML link pointing to a cloud, it does not open in the same frame but instead opens in a new window

I am having trouble with my image not resizing properly within the flexbox when using height and max-height properties

Trouble displaying certain HTML code and its output on the browser?

What are the best ways to integrate jQuery into a React application?

Does Firebase only send a single input value instead of a Span?

IE11 not running Angular code inline as expected