The following sites give a good introduction and insight into the use of floats and some of their quirks for the unwary.<\/p>\n
This Excellent introductory float tutorial<\/a><\/strong> from Max Design<\/strong> is well worth working through\u00a0entirely as a starter for beginners.<\/p>\n This article<\/a><\/strong> from CSS Newbie <\/strong>details\u00a0some of the quirks of floats and how content flows around floated\u00a0elements, and how container height is affected. There is\u00a0a fundamental point<\/strong> which the article illustrates, but which I could not find spelled out clearly and obviously in other articles anywhere. When other elements flow around\u00a0a floated one, it is the content area<\/strong> of their CSS boxes<\/strong><\/a> which flow. It is therefore perfectly possible (and normal) for\u00a0the floated element to end up sitting inside<\/strong> the margin, border and padding areas of the elements which float around it. The article also describes how the floated element can overlap (extend beyond) the border of the flowing\u00a0 element if for example the floated element is longer. This is not what you might expect. However, when the\u00a0flowing element is itself floating<\/strong>, then the height of the (inner) floating element dictates the height of the flowing element.<\/p>\n The\u00a0‘flowing of content area’\u00a0behaviour is used when designing multi column layouts, as\u00a0this article<\/a><\/strong> from Comunity MX <\/strong>illustrates. For example in a 2 column layout, the left column content is placed\u00a0in a ‘float: left’ div. The adjacent right colum flows around it, and has a left margin set to the width of the left column plus any desired gap.<\/p>\n This article<\/strong><\/a> by Matthew James Taylor<\/strong> describes a template for a 3 column floating layout with header and footer. The interesting thing about this is that Matthew does not use any CSS hacks or browser specific coding, but manages to achieve wide cross browser compatibility. He also has a number of other templates, all freely available, an addition to an interesting article<\/strong><\/a> <\/strong>on how to acheive equal height column backgrounds, again by nesting floating column divs inside other divs which are also floating.<\/p>\n","protected":false},"excerpt":{"rendered":" The following sites give a good introduction and insight into the use of floats and some of their quirks for the unwary. This Excellent introductory float tutorial from Max Design is well worth working through\u00a0entirely as a starter for beginners. This article from CSS Newbie details\u00a0some of the quirks of floats and how content flows […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79],"tags":[189,80,78,15,188],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/654"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=654"}],"version-history":[{"count":8,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/654\/revisions"}],"predecessor-version":[{"id":658,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/654\/revisions\/658"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}