{"id":269,"date":"2012-02-02T21:34:52","date_gmt":"2012-02-02T16:04:52","guid":{"rendered":"http:\/\/vikku.info\/codesnippets\/?p=269"},"modified":"2012-02-02T21:34:52","modified_gmt":"2012-02-02T16:04:52","slug":"centring-float-left-elements","status":"publish","type":"post","link":"http:\/\/vikku.info\/codesnippets\/html\/centring-float-left-elements\/","title":{"rendered":"centring float left elements"},"content":{"rendered":"<p>I wanted to center the divs which are floated left.<\/p>\n<p>I searched the web and found this and it is working for me.<\/p>\n<p><a href='http:\/\/stackoverflow.com\/questions\/1084666\/how-can-i-center-the-contents-of-a-div-that-float-left'>http:\/\/stackoverflow.com\/questions\/1084666\/how-can-i-center-the-contents-of-a-div-that-float-left<\/a><\/p>\n<p>This is just a copy for my reference even if that content is getting deleted future.<\/p>\n<p>Besides, the following is the code which does the exact trick which is referred in the above stackoverflow url.<\/p>\n<p><a href='http:\/\/www.pmob.co.uk\/temp\/centred-float4.htm'>http:\/\/www.pmob.co.uk\/temp\/centred-float4.htm<\/a><\/p>\n<pre lang='css'>\r\n<style type=\"text\/css\">\r\nhtml,body{\r\n\tmargin:0;\r\n\tpadding:30px 10px;\r\n\ttext-align:center;\r\n}\r\n#outer{\r\n\twidth:780px;\r\n\tmargin:auto;\r\n\ttext-align:left;\r\n\tborder:1px solid #000;\r\n}\r\n#outer{position:relative}\r\n.navwrap{\r\n\tfloat:right;\r\n\tposition:relative;\r\n\tleft:-50%;\r\n\ttext-align:left;\r\n\tmargin-bottom:2em;\r\n}\r\n.navwrap ul{\r\n\tlist-style:none; \r\n\tposition:relative;\r\n\tleft:50%;\r\n\tmargin:0;\r\n\tpadding:0;\r\n} \r\n.navwrap li{\r\n\tborder:1px solid #eff2df;\r\n\tfloat:left;\r\n\tmargin:0 10px 0 0;\r\n\tbackground:#809900;\r\n}\r\n.navwrap li.last{margin-right:0}\r\n.navwrap li a{\r\n\tfloat:left;\r\n\tborder:1px solid #4c7300;\r\n\tposition:relative;\r\n\tleft:-2px;\r\n\ttop:-2px;\r\n\tbackground:#eff2df;\r\n\tcolor:#4c7300;\r\n\ttext-decoration:none;\r\n\tpadding:6px 10px;\r\n\tfont-weight:bold;\r\n}\r\n.navwrap li a:hover{\r\n\tbackground:#809900;\r\n\tcolor:#fff;\r\n}\r\np{clear:both;padding:10px}\r\nh1{text-align:center;margin:1em 0;}\r\n.clearer{\r\n\theight:1px;\r\n\toverflow:hidden;\r\n\tmargin-top:-1px;\r\n\tclear:both;\r\n}\r\n\r\n\r\n\r\n<\/style>\r\n<!--[if IE ]>\r\n<style type=\"text\/css\">\r\n.navwrap ul{float:left;} \r\n\r\n<\/style>\r\n<![endif]-->\r\n<\/pre>\n<pre lang='html4strict'>\r\n\r\n<div id=\"outer\">\r\n\t<h1>Centred Widthless floats<\/h1>\r\n\t<div class=\"navwrap\">\r\n\r\n\t\t<ul>\r\n\t\t\t<li><a href=\"#\">Button 1<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Button 2's a bit longer<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">This is Button 3<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">B 4<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Button 5<\/a><\/li>\r\n\r\n\t\t\t<li class=\"last\"><a href=\"#\">This is Button 6<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/div>\r\n\t<div class=\"clearer\"><\/div>\r\n\t<!-- ie needs this clearer -->\r\n\t<div class=\"navwrap\">\r\n\t\t<ul>\r\n\t\t\t<li><a href=\"#\">Button 1<\/a><\/li>\r\n\r\n\t\t\t<li><a href=\"#\">Button 2's a bit longer<\/a><\/li>\r\n\t\t\t<li class=\"last\"><a href=\"#\">This is Button 3<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/div>\r\n\t<div class=\"clearer\"><\/div>\r\n\t<!-- ie needs this clearer -->\r\n\t<div class=\"navwrap\">\r\n\t\t<ul>\r\n\r\n\t\t\t<li class=\"last\"><a href=\"#\">Button 1<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/div>\r\n\t<p>The above navigation is floated using widthless floats and centred using a technique that moves the right floated parent wrapper 50% back towards the left using relative positioning -50%) and then applying a +50% left shift on the inner element also using relative positioning.<\/p>\r\n\t<p> The combined effect of this is to center the navigation within our layout<\/p>\r\n<\/div>\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I wanted to center the divs which are floated left. I searched the web and found this and it is working for me. http:\/\/stackoverflow.com\/questions\/1084666\/how-can-i-center-the-contents-of-a-div-that-float-left This is just a copy for my reference even if that content is getting deleted future. Besides, the following is the code which does the exact trick which is referred in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20],"tags":[],"_links":{"self":[{"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts\/269"}],"collection":[{"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/comments?post=269"}],"version-history":[{"count":1,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts\/269\/revisions"}],"predecessor-version":[{"id":270,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts\/269\/revisions\/270"}],"wp:attachment":[{"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/media?parent=269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/categories?post=269"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/tags?post=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}