Sidebar Appears Centered Below Header?

3 replies
  • WEB DESIGN
  • |
I'm following this course: In the Woods – WordPress for Designers: Day 5 to create a wp theme from scratch.

My site How to Start a Conversation With a Girl is where I have been using it. I just created the sidebar.php file following the course's directions but it's not appearing where the sidebar should be, but instead centered on top of the page's content. Anyone know what's wrong?

Will thank
Kyle
#appears #centered #header #sidebar
  • Bathunter,

    I tried to look at your site but I am receiving a common error when trying to visit the URL,


    Warning: Cannot modify header information - headers already sent by (output started at /home/elawntra/public_html/startaconversationwithagirl.com/wp-content/themes/kylesforesttheme/functions.php:12) in /home/elawntra/public_html/startaconversationwithagirl.com/wp-includes/pluggable.php on line 866

    It looks like you may have some unneccesary spaces in your wpconfig.php file.

    Here is a pretty good tutorial on how to fix that,

    Wordpress Error: Warning: Cannot modify header information

    Hope that helps,

    Shawn
    Signature
    Outsource to the experts...

    We customize your Blog, eBook, Press Release and Sale Copy content with your message.

    {{ DiscussionBoard.errors[7380622].message }}
  • Profile picture of the author Greg71
    Originally Posted by bathunter View Post

    I'm following this course: In the Woods – WordPress for Designers: Day 5 to create a wp theme from scratch.

    My site How to Start a Conversation With a Girl is where I have been using it. I just created the sidebar.php file following the course's directions but it's not appearing where the sidebar should be, but instead centered on top of the page's content. Anyone know what's wrong?

    Will thank
    Kyle
    The basic concept of html and css is that you have "squares" (divs) on a page. Within these divs goes your content.

    You must tell the browser where the divs are positioned in relation to each other. The content within each div will move around accordingly.

    Sounds to me that you need to use the float (float: left) command on your content div, so the next div in the code will float next to your content div.

    Could be that you've put your sidebar div before the content div in the code as well, instead of after it.

    Try giving each div a different colored border (border: 1px solid blue) /red/ black/ green etc, while you are building.
    {{ DiscussionBoard.errors[7380989].message }}
  • Profile picture of the author clickbump
    Looks like perhaps you are still working on the site, but to achieve the effect you want you will need to apply a defined width to the sidebar container as well as the main content container. Then, apply a float to the sidebar to move it to the right side of the main content.

    Here's the css you need for that:

    Code:
    #sidebar{float:right;width:35%}
    .post_snippet{width:60%}
    In the above code snippet, I've set an arbitrary width for the content divs (post_snippet) as well as the sidebar. You can change this to suit your needs as long as the total width does not exceed 100%.

    Also, bear in mind that you can add padding and margin to those elements and once you start experimenting with that it might be helpful to apply a box-sizing css to make things much simpler to work with. To do so, you would just add this line to your css:

    Code:
    #sidebar,.post_snippet{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    }
    You may also try experimenting with this for the header nav:

    Code:
    #nav li{display:inline}
    #nav li a {padding:0 10px}
    Signature
    {{ DiscussionBoard.errors[7391830].message }}

Trending Topics