{"id":156,"date":"2004-10-13T22:33:05","date_gmt":"2004-10-13T19:33:05","guid":{"rendered":"http:\/\/www.all-things-me.net\/blog\/archives\/2004\/10\/13\/layout-worries-revisited"},"modified":"2010-08-12T02:05:10","modified_gmt":"2010-08-11T23:05:10","slug":"layout-worries-revisited","status":"publish","type":"post","link":"https:\/\/www.all-things-me.net\/blog\/2004\/10\/13\/layout-worries-revisited","title":{"rendered":"Layout worries revisited: The solution"},"content":{"rendered":"

First of all, Happy Mulder’s Birthday!! He’s 43 today. Chris Carter, whose b’day it really<\/i> is, is 48.<\/p>\n

Now that I’m going crazy with formatting my code snippets and doing tiny icons to appear in the bottom right corner of the snippet box, I’m going to post a summary on the layout trick I learned in an article at A List Apart<\/a>. The basic structure of a page is<\/p>\n

\n<div id="wrapper">
\n  <div id="container">
\n    <div id="content">
\n    <\/div>
\n  <\/div>
\n  <div id="sidebar"><\/div>
\n  <div id="clear">&nbsp;<\/div>
\n<\/div>
\n<div id="footer"><\/div>\n<\/p><\/blockquote>\n

I.e. container, sidebar and clear-div go inside the wrapper. Clear-div makes sure the footer doesn’t clash with the menu.
\nThen, in the css part you specify<\/p>\n

\n#container {
\n  width: 100%;
\n  float: left;
\n  margin-right: –menu width<\/strong>px;
\n}
\n#content{
\n  margin-right: menu width<\/strong>px;
\n}
\n#sidebar {
\n  width: menu width<\/strong>px;
\n  float: right;
\n}
\n#clear{
\n  height: 0;
\n  clear: both;
\n}\n<\/p><\/blockquote>\n

This places the menu on the right hand side.<\/p>\n","protected":false},"excerpt":{"rendered":"

First of all, Happy Mulder’s Birthday!! He’s 43 today. Chris Carter, whose b’day it really is, is 48. Now that I’m going crazy with formatting my code snippets and doing tiny icons to appear in the bottom right corner of the snippet box, I’m going to post a summary on the layout trick I learned […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,15],"tags":[],"class_list":["post-156","post","type-post","status-publish","format-standard","hentry","category-site","category-tweaks"],"_links":{"self":[{"href":"https:\/\/www.all-things-me.net\/blog\/wp-json\/wp\/v2\/posts\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.all-things-me.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.all-things-me.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.all-things-me.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.all-things-me.net\/blog\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":1,"href":"https:\/\/www.all-things-me.net\/blog\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":1456,"href":"https:\/\/www.all-things-me.net\/blog\/wp-json\/wp\/v2\/posts\/156\/revisions\/1456"}],"wp:attachment":[{"href":"https:\/\/www.all-things-me.net\/blog\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.all-things-me.net\/blog\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.all-things-me.net\/blog\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}