{"id":239,"date":"2020-08-14T19:46:35","date_gmt":"2020-08-14T19:46:35","guid":{"rendered":"https:\/\/datatype.co.in\/blog\/?p=239"},"modified":"2020-08-20T09:35:37","modified_gmt":"2020-08-20T09:35:37","slug":"use-of-css-float-and-clear-properties","status":"publish","type":"post","link":"https:\/\/datatype.co.in\/blog\/use-of-css-float-and-clear-properties\/","title":{"rendered":"Use of CSS float and clear Properties"},"content":{"rendered":"\n

Are you struggling to place two or more divisions side by side in a web page? Then you should checkout CSS float<\/code> property.<\/p>\n\n\n\n

In this article I will show you how to use CSS float property to display two divisions side by side. Basically we will float one div to left and the other one to right. The width of each div should be around 50%. At the end of floating divs, it is important to use an empty div with class clear-fix. If we forget to add this div, then our rest of the page element will overflow and it will ruin page design. Therefore, whenever you use CSS float <\/code>property, don’t miss to use clear <\/code>property to fix the floating elements.<\/p>\n\n\n\n

<div id=\"container\">\n  \n  <div class=\"left\"> \n    This is left division\n  <\/div>\n\n  <div class=\"right\"> \n    This is right division\n  <\/div>\n  <!-- This div is important -->\n  <div class=\"clear-fix\"><\/div>\n\n<div> <\/code><\/pre>\n\n\n\n
Add the following CSS code in your css file :<\/p>\n\n\n\n
.left{\n   width: 49%;\n   float: left;\n   border: 1px solid #ccc\n}\n.right{\n   width: 49%;\n   float: right;\n   border: 1px solid #ccc\n}\n.clear-fix{\n   clear: both\n}<\/code><\/pre>\n\n\n\n
Notice the use of last div with class clear-fix. <\/p>\n\n\n\n
The float <\/code>property accepts 4 values – left<\/code><\/em>, right<\/code><\/em>, inherit <\/code><\/em>and none<\/code><\/em>.<\/p>\n\n\n\n
Here is complete example:<\/p>\n\n\n\n
<html>\n<head>\n   <title>Use Of CSS Float & Clear Properties<\/title>\n   <style>\n      .left{\n  \t width: 49%;\n\t float: left;\n         border: 1px solid #ccc\n       }\n     .right{\n  \t width: 49%;\n\t float: right;\n         border: 1px solid #ccc\n       }\n       .clear-fix{\n  \t  clear: both\n       }\n   <\/style>\n<\/head>\n<body>\n<div id=\"container\">\n  <div class=\"left\"> \n    This is left division\n  <\/div>\n  <div class=\"right\"> \n    This is right division\n  <\/div>\n  <!-- This div is important -->\n  <div class=\"clear-fix\"><\/div>\n<div> \n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
If you want to display three divisions side by side, use two divs with class .left<\/code> and one div with class .right<\/code> <\/em>(or, two divs with class .right<\/code> <\/em>and one div with class .left<\/code>). At the end you will have to add one empty div with class .clear-fix<\/code> <\/em>in both cases. Each div width <\/code>should be around 33.3% to fit all in a line.<\/p>\n\n\n\n
You can try this code here :  Datatype Code Editor<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Are you struggling to place two or more divisions side by side in a web page? Then you should checkout CSS float property. In this article I will show you [ … ]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[126,128,125,127,124,123],"class_list":["post-239","post","type-post","status-publish","format-standard","hentry","category-css","tag-css-clear","tag-css-display-divs-side-by-side","tag-css-float","tag-css-float-example","tag-use-of-css-clear-property","tag-use-of-css-float-property","list-style-post"],"_links":{"self":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/comments?post=239"}],"version-history":[{"count":12,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/239\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/239\/revisions\/363"}],"wp:attachment":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media?parent=239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/categories?post=239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/tags?post=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}