{"id":74,"date":"2015-09-07T05:24:11","date_gmt":"2015-09-07T05:24:11","guid":{"rendered":"http:\/\/roguedzines.com\/blog\/?p=74"},"modified":"2015-09-07T05:24:11","modified_gmt":"2015-09-07T05:24:11","slug":"trouble-centering-your-layout","status":"publish","type":"post","link":"http:\/\/thischickcodes.com\/index.php\/2015\/09\/07\/trouble-centering-your-layout\/","title":{"rendered":"Trouble centering your layout?"},"content":{"rendered":"

I have come across a number of websites and have helped a few people with this problem with not being able to center their layout – the correct<\/em> way.<\/p>\n

First things first you should be using a reset CSS such as Eric Meyer’s<\/a>, this will get rid of unnecessary margins, padding etc that are default.<\/p>\n

I like to create a div that everything gets “wrapped” in, for this we will use the ID wrapper. (remember you can only use ID’s once – class names can be used more than once).
\nDo not set a width to this and by default DIV’s are blocks and width is automatically 100%<\/strong>. Our #main-container will have a set width, margin 0 auto will center<\/strong> it.<\/p>\n

For this tutorial I added a border to show that the container is centered. Then finally a class name main-content which has a padding of 20px so it’s not touching the edge.<\/p>\n

That’s how you center a layout, leave a comment if you have any questions.<\/p>\n

CSS<\/p>\n

#wrapper{\nbackground: #2A7D58;\n}\n\n#main-container{\nwidth:960px;\nmargin: 0 auto;\ncolor: #fff;\nborder:1px solid #fff;\n}\n.main-content{\npadding:20px;\n}\n<\/code>\n<\/pre>\n
HTML<\/p>\n
<div id=\"wrapper\">\n  <div id=\"main-container\">\n    <div class=\"main-content\">\n      <p>This is a centered layout!<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n
DEMO<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
I have come across a number of websites and have helped a few people with this problem with not being able to center their layout – the correct way. First things first you should be using a reset CSS such as Eric Meyer’s, this will get rid of unnecessary margins, padding etc that are default. […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[15,16,21],"_links":{"self":[{"href":"http:\/\/thischickcodes.com\/index.php\/wp-json\/wp\/v2\/posts\/74"}],"collection":[{"href":"http:\/\/thischickcodes.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/thischickcodes.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/thischickcodes.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/thischickcodes.com\/index.php\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":0,"href":"http:\/\/thischickcodes.com\/index.php\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"wp:attachment":[{"href":"http:\/\/thischickcodes.com\/index.php\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/thischickcodes.com\/index.php\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/thischickcodes.com\/index.php\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}