Placing your sidebar at the top

  • Unknown's avatar
    seandodson · Member ·

    Hello,
    I’ve been trying to restructure by page template. Basically i’d like my sidebar to be placed at the top of my page, rather than below the header. I’ve tried using float to rearrange the grid of my page, but it keeps messing up. Could anyone give me a hint to what i’m missing?

    best wishes,

    Sean

    blog here

    CSS: html {
    height:100%;
    margin-bottom:1px;
    }

    body {
    font-size:62.5%;
    font-family:’Lucida Grande’, Verdana, Arial, Sans-Serif;
    color:#333;
    text-align:center;
    background-color:white;
    margin:1px;
    padding:0;
    }

    #page {
    text-align:left;
    width:720px;
    background-color:white;
    margin:20px auto;
    padding:0;
    }

    #header a {
    line-height:1em;
    font-size:3.5em;
    font-weight:bold;
    color:#ff0000;
    margin-left:0;
    }

    #blog_title_hide {
    display:none;
    }

    #content {
    float:left;
    font-size:1.2em;
    width:500px;
    }

    .widecolumn .entry p {
    font-size:1.05em;
    }

    .narrowcolumn .entry,.widecolumn .entry {
    line-height:1.4em;
    }

    .widecolumn {
    line-height:1.6em;
    width:450px;
    overflow:hidden;
    margin:5px 0 0 150px;
    padding:10px 0 20px;
    }

    .narrowcolumn .postmetadata {
    text-align:left;
    font-size:.8em;
    padding-top:5px;
    }

    .alt {
    background-color:#f8f8f8;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
    margin:0;
    padding:10px;
    }

    small {
    font-family:Arial, Helvetica, Sans-Serif;
    font-size:.9em;
    line-height:1.5em;
    }

    h1,h2,h3 {
    font-family:Garamond, ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    font-weight:normal;
    }

    h1 {
    font-size:2em;
    text-align:centre;
    margin:0;
    }

    #header p {
    margin-bottom:0;
    margin-left:0;
    margin-top:0;
    }

    .description {
    font-size:1.2em;
    color:#333333;
    margin-left:220px;
    }

    h2 {
    font-size:1.6em;
    clear:both;
    margin:30px 0 0;
    }

    h2.pagetitle {
    font-size:1.6em;
    margin-top:2px;
    background-color:#F0F0F0;
    }

    #sidebar h2 {
    font-family:’Lucida Grande’, Verdana, Sans-Serif;
    font-size:1.4em;
    text-transform:lowercase;
    margin:5px 0 0;
    padding:0;
    }

    h3 {
    font-size:1.3em;
    margin:30px 0 0;
    padding:0;
    }

    h1,h1 a,h1 a:hover,h1 a:visited,.description {
    text-decoration:none;
    }

    h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited {
    color:#333;
    }

    h2,h2 a,h2 a:hover,h2 a:visited,h3,h3 a,h3 a:hover,h3 a:visited,#sidebar h2,#wp-calendar caption,cite {
    text-decoration:none;
    }

    .entry p a:visited {
    color:#b85b5a;
    }

    .commentlist li,#commentform input,#commentform textarea {
    font:.9em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    }

    .commentlist li {
    position:relative;
    font-weight:bold;
    list-style:none;
    margin:15px 0 3px;
    padding:5px 10px 3px;
    }

    .commentlist li .avatar {
    position:absolute;
    right:15px;
    border:1px solid #ccc;
    padding:2px;
    }

    .commentlist cite,.commentlist cite a {
    font-weight:bold;
    font-style:normal;
    font-size:1.1em;
    }

    .commentlist p {
    font-weight:normal;
    line-height:1.5em;
    text-transform:none;
    margin:10px 5px 10px 0;
    }

    #commentform p {
    font-family:’Lucida Grande’, Verdana, Arial, Sans-Serif;
    margin:5px 0;
    }

    .commentmetadata {
    font-weight:normal;
    clear:both;
    display:block;
    margin:0;
    }

    #sidebar {
    font:1em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    overflow:hidden;
    width:180px;
    float:right;
    text-align:left;
    }

    small,#sidebar ul ul li,#sidebar ul ol li,.nocomments,.postmetadata,blockquote,strike {
    color:#777;
    }

    code {
    font-size:1.1em;
    }

    acronym,abbr,span.caps {
    font-size:.9em;
    letter-spacing:.07em;
    cursor:help;
    }

    a,h2 a:hover,h3 a:hover {
    color:#06c;
    text-decoration:none;
    }

    a:hover {
    color:#147;
    text-decoration:underline;
    }

    #wp-calendar #prev a {
    font-size:9pt;
    padding-left:10px;
    text-align:left;
    }

    #wp-calendar a {
    text-decoration:none;
    display:block;
    }

    #wp-calendar caption {
    font:bold 1.3em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    text-align:center;
    width:100%;
    }

    #wp-calendar th {
    font-style:normal;
    text-transform:capitalize;
    }

    #header {
    width:100%;
    margin:0 auto 34px;
    padding:0;
    }

    #header h1 {
    font-size:18px;
    }

    .narrowcolumn {
    float:left;
    overflow:hidden;
    margin:0;
    padding:0 0 10px 15px;
    }

    .post h2 {
    text-align:left;
    font-size:1.7em;
    font-weight:bold;
    margin:0;
    }

    .post h2 a:hover {
    color:#3b6ea5;
    }

    .postmetadata {
    clear:both;
    }

    .widecolumn .postmetadata {
    margin:30px 0;
    }

    #footer {
    width:100%;
    clear:both;
    text-align:center;
    margin:0 auto;
    padding:0 0 0 1px;
    }

    #footer p {
    margin-left:220px;
    margin-top:0;
    }

    hr {
    width:360px;
    margin-left:0;
    }

    h3.comments {
    margin:40px auto 20px;
    padding:0;
    }

    p img {
    margin:0 5px;
    padding:0;
    }

    img.centered {
    display:block;
    margin-left:auto;
    margin-right:auto;
    }

    img.alignright {
    display:inline;
    margin:0 0 2px 7px;
    padding:4px;
    }

    img.alignleft {
    display:inline;
    margin:0 7px 2px 0;
    padding:4px;
    }

    .alignright {
    float:right;
    }

    .alignleft {
    float:left;
    }

    html>body .entry ul {
    margin-left:0;
    list-style:none;
    text-indent:-10px;
    padding:0 0 0 10px;
    }

    html>body .entry li {
    margin:7px 0 8px 10px;
    }

    .entry ul li:before,#sidebar ul ul li:before {
    content:”0BB 020″;
    }

    .entry ol {
    margin:0;
    padding:0 0 0 35px;
    }

    .entry ol li {
    margin:0;
    padding:0;
    }

    .postmetadata ul,.postmetadata li {
    display:inline;
    list-style-type:none;
    list-style-image:none;
    }

    #sidebar ul,#sidebar ul ol {
    margin:0;
    padding:0;
    }

    #sidebar ul li {
    list-style-type:none;
    list-style-image:none;
    margin-bottom:15px;
    }

    #sidebar ul p,#sidebar ul select {
    margin:5px 0 8px;
    }

    #sidebar ul ul,#sidebar ul ol {
    margin:5px 0 0 10px;
    }

    #sidebar ul ul ul,#sidebar ul ol {
    margin:0 0 0 10px;
    }

    ol li,#sidebar ul ol li {
    list-style:decimal outside;
    }

    #sidebar ul ul li,#sidebar ul ol li {
    margin:3px 0 0;
    padding:0;
    }

    #searchform {
    text-align:right;
    margin:10px auto;
    padding:5px 3px;
    }

    #sidebar #searchform #s {
    width:85px;
    padding:2px;
    }

    #sidebar #searchsubmit {
    padding:1px;
    }

    .entry form {
    text-align:center;
    }

    select {
    width:130px;
    }

    #commentform input {
    width:170px;
    margin:5px 5px 1px 0;
    padding:2px;
    }

    #commentform textarea {
    width:95%;
    padding:2px;
    }

    #commentform #submit {
    float:right;
    margin:0;
    }

    .commentlist {
    text-align:justify;
    margin:0;
    padding:0;
    }

    .nocomments {
    text-align:center;
    margin:0;
    padding:0;
    }

    #sidebar form {
    margin:0;
    }

    #sidebar a {
    color:#ff0000;
    }

    #pagenav {
    margin:0;
    }

    #sidebar li {
    clear:both;
    }

    #akismetwrap {
    float:right;
    }

    #wp-calendar {
    empty-cells:show;
    width:155px;
    margin:10px auto 0;
    }

    #wp-calendar #next a {
    padding-right:10px;
    text-align:right;
    }

    #wp-calendar td {
    text-align:center;
    padding:3px 0;
    }

    #wp-calendar td.pad:hover {
    background-color:#fff;
    }

    acronym,abbr {
    border-bottom:1px dashed #999;
    }

    blockquote {
    padding-left:20px;
    border-left:1px solid #ddd;
    margin:15px 30px 0 10px;
    }

    blockquote cite {
    display:block;
    margin:5px 0 0;
    }

    .center {
    text-align:center;
    }

    .hrhide {
    display:none;
    }

    a img {
    border:none;
    }

    .navigation {
    display:block;
    text-align:center;
    margin-bottom:30px;
    }

  • Unknown's avatar
    devblog · Member ·

    I would advice you not to place a sidebar on top, especially with the widgets you have. However, if you insist on having the sidebar on top, I’d suggest you to use Sandbox-10 because it would be easier to style that theme than modifying an existing one.

    Positioning the sidebar to the top could be tricky and you’d have to really know your CSS to accomplish a decent look.

    Just me two cents

  • Unknown's avatar
    seandodson · Member ·

    hey thanks for that. I had a look at Sandbox, but it looks like i have to be hosting my own site to use it. Am i right?

    best wishes,
    Sean

  • Unknown's avatar
    devblog · Member ·

    Not at all. Sandbox-10 is one of the many themes that you can choose from. Notice that I’m appending the “-10” to the name of the theme; the reason for that is because there are two versions of Sandbox offered here: Sandbox (old version) and Sandbox-10 (newer and _better_ version). To see them, go to page 4 in the themes section, they should be there.

  • The topic ‘Placing your sidebar at the top’ is closed to new replies.