Grow your CSS skills. Land your dream job.

Sidebar has moved down page

  • # June 25, 2013 at 4:36 am

    I’m using wordpress 3.3.1 with Headway theme.

    The sidebar used to sit at the top of the page, but has now moved down the page?
    It may have happened after I’d edited some of the text content on the page.

    Can anyone help? It’s driving me nuts!

    http://codepen.io/dutchpuzzle/pen/vDgcp

    # June 25, 2013 at 4:53 am

    .container {
    float: left;
    width: 80%;
    /* Remove padding, margin, border, position */
    }

    .sidebar {
    float: left;
    width: 20%;
    /* Remove padding, margin, border, position */
    }

    Done.

    # June 25, 2013 at 5:09 am

    Do I just copy and paste that in to the custom css for that page? (Sorry I’m a novice at this!)
    or do I need to do the things between the /* */ ?

    # June 25, 2013 at 5:14 am

    Well, no. You have to find the CSS code blocks for `.container` and `.sidebar` in your stylesheet and edit/set/remove what I told you right above.

    Remember to backup your stylesheets first before editing anything.

    # June 25, 2013 at 5:16 am

    Ok gotcha and will do.
    Many thanks
    Sorry for being dim – got a lot to learn!

    # June 25, 2013 at 5:22 am

    http://codepen.io/shixnxgai/pen/FyGDq

    Simply, you have only to add this css code

    >div.container {width:auto !important;}

    to this section :D

    ><

    /style>

    # June 25, 2013 at 6:47 am

    Is that possible with the Headway theme?
    Where do I find

    I’m not sure where to input new code. Do I use the live css editor?

    # June 25, 2013 at 7:04 am

    Ah, I’ve done it. I just added div.container {width:auto !important;} to the live css editor and it worked immediately.
    Thank you so much!

    # June 25, 2013 at 8:45 am

    I’m happy to be of help.
    but, my solution is something like an emergency measure.
    If you have time, Please try @HugoGiraudel‘s way and look “CSS Float Theory” up in this page.

    http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".