/** Layout --------------------------------- * Using a negative margin technique, adapted from ZEN. The page is loaded by this order: * * 1. Header * 2. Content * 3. Navigation menus * 4. Sidebar Left * 5. Sideabr Right * */ #header, #main, #footer { width: 960px; /* edit to change the width of the page */ margin: 0 auto; /* remove 'auto' and the width to switch to a fluid width */ } /** LAYOUT RULES --------------------------------- * do not change if you're not sure you know what you're doing */ #content { float: left; width: 100%; margin-right: -100%; padding: 0; } .sidebar { float: left; } #sidebar-second { float: right; } #footer { float: none; clear: both; } /* Layout Helpers */ #header, #footer, .mission, .breadcrumb, .node { clear: both; } /** Sidebars width --------------------------------- * Changing the width of the sidebars is dead easy, just change the * values below corresponding to the sidebar you want to modify. * Make sure you keep negative values as negative values. * For example, if I want to increase the width of the left sidebar * to 300px, I would have to change each '190' to '300'. */ .two-sidebars .center, .sidebar-left .center { margin-left: 190px; /* LEFT value */ } #sidebar-first { width: 190px; /* LEFT value */ margin-right: -190px; /* negative LEFT value */ } .two-sidebars .center, .sidebar-right .center { margin-right: 200px; /* RIGHT value */ } #sidebar-second { width: 200px; /* RIGHT value */ } /** Columns inner --------------------------------- * You can change the padding inside the columns without changing the * width of them by just usinbg the INNER div of each column */ .inner { padding: 0px; } /** Navigation styles --------------------------------- * The navigation is loaded after the content, so we need to make space * for it, equal to its height, so if you change the height of the navigation, * remember to adapt the margin top of the content and sidebars. */ #navigation { float: left; margin-left: 0; margin-right: -100%; padding: 0; width: 100%; } .with-navigation #content, .with-navigation .sidebar { margin-top: 40px; /* Navigation Height */ } #navigation { height: 40px; /* Navigation Height */ }