{"id":6117,"date":"2015-08-10T12:15:29","date_gmt":"2015-08-10T09:15:29","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6117"},"modified":"2018-01-08T14:14:09","modified_gmt":"2018-01-08T12:14:09","slug":"css-float-left-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/","title":{"rendered":"CSS Float Left Example"},"content":{"rendered":"

In this example, we’ll explain a very useful CSS positioning property, float<\/code>. The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. It is supported on all modern browsers and can be used with having to add extra prefixes.<\/p>\n

Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. Float’s sister property is clear<\/code>. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float.<\/p>\n

 
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Basics<\/h2>\n

1.1 Document Setup<\/h2>\n

Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS3 Float Left Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
1.2 Syntax and Values<\/h3>\n
Just like all css properties, the syntax for float follows the format: .class\/tag { property: value; }<\/code>, in this case: float: value;<\/code>.
\nThe values this property can take are:
\nfloat: left; <\/code>      – indicates that the element must float on the left side of its containing block.
\nfloat: right;  <\/code>    – indicates that the element must float on the right side of its containing block.
\nfloat: none; <\/code>      – indicates that the element must not float.<\/p>\n
\/* Global values *\/
\nfloat: inherit;<\/code>
\nfloat: initial;<\/code>
\nfloat: unset;<\/code><\/p>\n
1.3 Application<\/h3>\n
Let’s see the very first and basic application of the float property. First add some elements to the html like below:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div class=\"wrapper\">\r\n    <h3>Title goes here<\/h3>\r\n    <p>Bacon ipsum dolor amet tail corned beef beef, brisket biltong shoulder shankle chicken. Jerky shoulder ham tongue leberkas, spare ribs shankle andouille flank pancetta. Jerky meatloaf chuck, sausage turducken venison shank. Rump tenderloin bresaola pork chop. Tail pancetta picanha cow pastrami, boudin alcatra pig ribeye. Ball tip t-bone short loin ground round. Rump prosciutto bacon pork belly filet mignon.<\/p>\r\n    <img src=\"image.png\">\r\n<\/div>\r\n<\/pre>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\nbody {\r\n    font-family: \"Neris\";\r\n}\r\n.wrapper {\r\n    margin: 2em;\r\n}\r\nimg {\r\n    float: left;   \/* display image on the left side of the document *\/\r\n}\r\n<\/style>\r\n<\/pre>\n
Pretty straight forward, in the browser it would look like this:
\n
\"CSS<\/a>
CSS Float Left Property Basic Application<\/figcaption><\/figure>
\nWell, this might seem dissapointing for now, because as you can see, the image is right where it could normally be without using the float property. This is because the default state of a new element is top left, after the previous element, that is why you see that image right there. In a general viewpoint, float forces the element to align left\/right. To understand this better, follow along in the next section.<\/p>\n
2. Getting to Know Float Better<\/h2>\n
2.1 Understanding Positioning Cases<\/h3>\n
You just saw how we floated an image on the left side of our document, but that didn’t seem to be any different from the default state. Let’s see a more specific case where the image has some text before it in the code, which will normally move the image a little bit right, but that doesn’t happen because of float: left, and this is where it starts to become interesting. Change the HTML like so:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n\r\nJust random text here!  <img src=\"image.png\">\r\n\r\n<\/pre>\n
Without changing the CSS, look at the result we’d get:
\n
\"Getting<\/a>
Getting to Know Float<\/figcaption><\/figure>
\nNotice how even though the text was before the image in our HTML, they switched places because of the float: left;<\/code> property applied to the img element. That forced the image to override any other element on the left by moving them to the right, and positioning itself most left than any other.<\/p>\n
But what if we wanted to align the image left\/right in the same space used by the paragraph, not below it? Well, you can do that by including the img element inside our paragraph element and that will enable the image to alight left\/right relating to the paragraph like this:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div class=\"wrapper\">\r\n    <h3>Title goes here<\/h3>\r\n    <p><img src=\"image.png\"> Bacon ipsum dolor amet tail corned beef beef, brisket biltong shoulder shankle chicken. Jerky shoulder ham tongue leberkas, spare ribs shankle andouille flank pancetta. Jerky meatloaf chuck, sausage turducken venison shank. Rump tenderloin bresaola pork chop. Tail pancetta picanha cow pastrami, boudin alcatra pig ribeye. Ball tip t-bone short loin ground round. Rump prosciutto bacon pork belly filet mignon.<\/p>\r\n<\/div>\r\n<\/pre>\n
Now we’d have an image wrapped on the left, and it would look like this:
\n
\"Left<\/a>
Left Floated Image Wrapped in a Paragraph<\/figcaption><\/figure><\/p>\n
2.2 Multiple Element on Float<\/h3>\n
Now let us look at the case where the property is applied to multple inline elements. If two or more elements will have the property float:left;<\/code> then the first one of them is going to be aligned in the most left hand of the page. Think of it just like the normal state of these elements. Look at the html below where we have created a new wrapper containing 3 boxes and a span element with text inside.<\/p>\n
\r\n<div class=\"wrapper1\">\r\n    <h3>Title goes here<\/h3>\r\n    <div class=\"box box1\">Float Left - Box 1<\/div>\r\n    <span>I'm not floated at all.<\/span>\r\n    <div class=\"box box2\">Float Left - Box 2<\/div>\r\n    <div class=\"box box3\">Float Left - Box 3<\/div>\r\n<\/div>\r\n<\/pre>\n
And in the styles, we’ve given them all float: left;<\/code> property and some bg-colors to make them distinct.<\/p>\n
\r\n.box {\r\n    width: 200px;\r\n    height: 100px;\r\n    border: 1px solid #ccc;\r\n    margin-right: 1em;\r\n    text-align: center;\r\n    display: inline-block;\r\n    line-height: 6em;\r\n    float: left;\r\n}\r\n\r\n.box1 {\r\n    background-color: gray;\r\n    color: white;.\r\n}\r\n\r\n.box2 {\r\n    background-color: green;\r\n    color: white;.\r\n}\r\n\r\n.box3 {\r\n    background: purple;\r\n    color: white;\r\n}\r\n<\/pre>\n
Normally, the boxes would all align left, and that would seem to make no difference from the default state:
\n
\"All<\/a>
All boxes Floated Left<\/figcaption><\/figure>
\nIn a similar manner, if we were to change the float property from applying it to all boxes to just two boxes, those two particular boxes would align left but in the order specified in the HTMl code, meaning if we floated the 2nd and 3rd box to the left only, they’d both float left but 2nd box would be positioned before 3rd box. Here it is:<\/p>\n
\r\n.box1 {\r\n    background-color: gray;\r\n    color: white;\r\n    \/*no float here*\/\r\n}\r\n\r\n.box2 {\r\n    background-color: green;\r\n    color: white;\r\n    float: left;\r\n}\r\n\r\n.box3 {\r\n    background: purple;\r\n    color: white;\r\n    float: left;\r\n}\r\n<\/pre>\n
As you’d imagine, we’d get this:
\n
\"Multiple<\/a>
Multiple Elements on Float Left<\/figcaption><\/figure><\/p>\n
3. Conclusion<\/h2>\n
To conclude, the float<\/code> property is a very useful CSS tool that allows better element alignment and overall positioning. Genereally speaking, float: left is going to seem just like the normal default state most of the times, but do remember that when things get messy around the page and you don’t get elements positioned like you want, float: left is going to be of much help because of its force state positioning.<\/p>\n
4. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: CSS Float Left<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this example, we’ll explain a very useful CSS positioning property, float. The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. It is supported on all modern browsers and …<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-6117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nCSS Float Left Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we'll explain a very useful CSS positioning property, float. The float CSS property specifies that an element should be taken from the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Float Left Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we'll explain a very useful CSS positioning property, float. The float CSS property specifies that an element should be taken from the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-08-10T09:15:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:14:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Float Left Example\",\"datePublished\":\"2015-08-10T09:15:29+00:00\",\"dateModified\":\"2018-01-08T12:14:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/\"},\"wordCount\":879,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/\",\"name\":\"CSS Float Left Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-08-10T09:15:29+00:00\",\"dateModified\":\"2018-01-08T12:14:09+00:00\",\"description\":\"In this example, we'll explain a very useful CSS positioning property, float. The float CSS property specifies that an element should be taken from the\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Float Left Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Float Left Example - Web Code Geeks - 2026","description":"In this example, we'll explain a very useful CSS positioning property, float. The float CSS property specifies that an element should be taken from the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Float Left Example - Web Code Geeks - 2026","og_description":"In this example, we'll explain a very useful CSS positioning property, float. The float CSS property specifies that an element should be taken from the","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-08-10T09:15:29+00:00","article_modified_time":"2018-01-08T12:14:09+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Float Left Example","datePublished":"2015-08-10T09:15:29+00:00","dateModified":"2018-01-08T12:14:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/"},"wordCount":879,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/","name":"CSS Float Left Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-08-10T09:15:29+00:00","dateModified":"2018-01-08T12:14:09+00:00","description":"In this example, we'll explain a very useful CSS positioning property, float. The float CSS property specifies that an element should be taken from the","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-float-left-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Float Left Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=6117"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6117\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=6117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=6117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=6117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}