Parent div height breaks

Freeway
1

I have a div with an image and text inside. When I float the image so that the text is to the right of it the parent div, the height breaks and the image overflows.
See example: “Latest News” - House of Cards image

Why? Help.

Billy

http://www.smartytest.com/Sarah/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

2

The outer box is not set to clear its children. You can force this by setting Overflow: hidden on the parent box. That forces the browser to consider floated children when it calculates the parent’s bounds.

Walter

On Jun 5, 2018, at 4:14 PM, billy kimmel email@hidden wrote:

I have a div with an image and text inside. When I float the image so that the text is to the right of it the parent div, the height breaks and the image overflows.
See example: “Latest News” - House of Cards image

Why? Help.

Billy

http://www.smartytest.com/Sarah/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

CSS layout rules are complicated, and are designed to avoid difficult or impossible layout calculations rather than be logical and obvious to users.

According to 10.6.3 of the CSS 2.1 spec ("Block-level non-replaced elements in normal flow when ‘overflow’ computes to ‘visible’”):

"Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored… )”

(Freeway’s display is incorrect in this situation.)

There are different rules for absolute elements (layers).

If you set “overflow” to be “hidden” instead of “visible”, or use a layer parent, the height of the floating child will be taken into account.

Jeremy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

Thanks Guys that worked.

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options