{"id":7195,"date":"2024-04-14T16:57:09","date_gmt":"2024-04-14T08:57:09","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=7195"},"modified":"2024-04-14T16:57:09","modified_gmt":"2024-04-14T08:57:09","slug":"encompass-text-around-a-picture-using-floating","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/encompass-text-around-a-picture-using-floating\/","title":{"rendered":"Encompass text around a picture using floating"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>To implement floating for a picture towards the left and have the text below wrap around it:<\/p>\n<ol>\n<li>Opt for an image that overlays text elements<\/li>\n<li>Access the layout configurations within the Style panel<\/li>\n<li>Choose the left float option<\/li>\n<li>Incorporate <strong>padding<\/strong> to the right and bottom for spacing between the image borders and surrounding content<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/228046838\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/228046838\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>When aligning an image to the right, don&#8217;t forget to incorporate left and bottom padding for spacing.<\/p>\n<h2>Clearing\u00a0an enclosing element<\/h2>\n<p>To establish clear visibility on a wrapped component:<\/p>\n<ol>\n<li>Choose the element beneath a floated component<\/li>\n<li>Access the layout settings within the Style panel<\/li>\n<li>Select the desired Clear setting<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/228046836\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/228046836\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h2>Constructing\u00a0tailored columns through floating<\/h2>\n<p>You have the ability to utilize floats to arrange elements side by side and occupy the entire width of a parent container, such as the columns section. To craft personalized columns with floats:\u00a0<\/p>\n<ol>\n<li>Incorporate a div block onto the canvas \u2014 this becomes your enveloper<\/li>\n<li>Add 3 div blocks within the enveloper<\/li>\n<li>Introduce a class to one of the 3 div blocks recently added<\/li>\n<li>Fix a\u00a0width\u00a0of\u00a033.33%\u00a0and set the\u00a0float to the left<\/li>\n<li>Apply the same class to the remaining two div blocks<\/li>\n<\/ol>\n<p>You can likewise utilize floats to shift an element to the left or right within a parent container. The method remains consistent with what was described for floating an image above.<\/p>\n<h6>Flexbox can handle all layout responsibilities mentioned earlier more conveniently and effectively.\u00a0<a href=\"https:\/\/help.webflow.com\/article\/the-flexbox-guide\">Discover more about employing flexbox.<\/a><\/h6>\n<p>\u200d<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use float to wrap text around images and clear a wrapped element.","protected":false},"author":2,"featured_media":7196,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-7195","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=7195"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7195\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/7196"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=7195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=7195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=7195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}