Parent div height breaks

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

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

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

Thanks Guys that worked.

Billy


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