{"id":149,"date":"2017-04-11T20:01:25","date_gmt":"2017-04-11T20:01:25","guid":{"rendered":"http:\/\/mansavageproductions.com\/websitesvideos\/?p=149"},"modified":"2017-04-11T22:53:19","modified_gmt":"2017-04-11T22:53:19","slug":"how-to-float-3-divs-side-by-side","status":"publish","type":"post","link":"http:\/\/mansavageproductions.com\/websitesvideos\/2017\/04\/11\/how-to-float-3-divs-side-by-side\/","title":{"rendered":"How to float 3 divs side by side."},"content":{"rendered":"

The modern way is using the CSS3 flexbox<\/span><\/u><\/strong><\/a><\/p>\n

Put the following into the .css file:<\/p>\n

.<\/span>container <\/span>{<\/span>
\ndisplay<\/span>:<\/span> flex<\/span>;<\/span>
\n}<\/span> .<\/span>container <\/span>><\/span> div <\/span>{<\/span>
\nflex<\/span>:<\/span> 1<\/span>;<\/span> \/*grow*\/<\/span>
\n}<\/span><\/p>\n

Put the following into the page code:<\/p>\n

<div<\/span> class<\/span>=<\/span>“container”<\/span>><\/span>
\n<div><\/span>Left div<\/span><\/div><\/span>
\n<div><\/span>Middle div<\/span><\/div><\/span>
\n<div><\/span>Right div<\/span><\/div><\/span>
\n<\/div><\/span><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

The modern way is using the CSS3 flexbox Put the following into the .css file: .container { display: flex; } .container > div { flex: 1; \/*grow*\/ } Put the following into the page code: <div class=“container”> <div>Left div<\/div> <div>Middle div<\/div> <div>Right div<\/div> <\/div>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-149","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/posts\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/comments?post=149"}],"version-history":[{"count":4,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/posts\/149\/revisions"}],"predecessor-version":[{"id":153,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/posts\/149\/revisions\/153"}],"wp:attachment":[{"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/media?parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/categories?post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/tags?post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}