{"id":220,"date":"2007-01-14T13:47:41","date_gmt":"2007-01-14T18:47:41","guid":{"rendered":"http:\/\/www.juixe.com\/techknow\/index.php\/2007\/01\/14\/div-align-with-css\/"},"modified":"2012-07-05T20:28:47","modified_gmt":"2012-07-06T03:28:47","slug":"div-align-with-css","status":"publish","type":"post","link":"http:\/\/juixe.com\/techknow\/index.php\/2007\/01\/14\/div-align-with-css\/","title":{"rendered":"Div Align With CSS"},"content":{"rendered":"<p>When playing with custom web designs, or off the shelf templates, the most common CSS work involves changing the margin, padding, color and background of HTML elements.  I usually also usually align elements either to the left, right, or center using CSS.<\/p>\n<p>To get started with code samples, to center a div in the middle of a container div you can use the following CSS:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.center {\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n}\r\n<\/pre>\n<p>If you want to align a div to the right and another div opposite to the first on the left you can use the following CSS classes.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.right {\r\n  float: right;\r\n}\r\n.left {\r\n   float: left;\r\n}\r\n<\/pre>\n<p>I have found that when I used both div that float both to the right and left that you have to follow that with an empty div that clears, or resets, the float CSS property.  If I don&#8217;t clear the float property other elements such as a menu that is aligned to the right might not render correctly.  Here is the CSS class to clear the float property, use it in a div the divs that have been aligned to the right, left, or both right and left.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.clear {\r\n  clear: both;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>When playing with custom web designs, or off the shelf templates, the most common CSS work involves changing the margin, padding, color and background of HTML elements. I usually also usually align elements either to the left, right, or center using CSS. To get started with code samples, to center a div in the middle [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[9,13,3],"tags":[763,762,758,761,801,760,759,102,757],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p902K-3y","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/220"}],"collection":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/comments?post=220"}],"version-history":[{"count":2,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/220\/revisions"}],"predecessor-version":[{"id":1647,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/220\/revisions\/1647"}],"wp:attachment":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/media?parent=220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/categories?post=220"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/tags?post=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}