Support » Themes and Templates » Sidebar positioning problem

  • I have just recently decided to use WordPress and have gotten pretty familiar with PHP and designing a theme using templates. I have created my own theme for my blog, and I have my main area positioned in the right spot, but for some reason cannot get my sidebar to stay in one place. Using the ‘margin: 0px 0px 0px 0px’ tag in my css file I positioned it but as I began to add posts, I noticed the sidebar would not begin where I desired it to. Instead, it would be “pushed” down by the main div, and would start where all of the main div text ended. I tried using the ‘style=”position:absolute; top:#px, left:#px; width:#px” in the div tag in my sidebar template, but that only caused the sidebar to completely disappear, as did adding the same exact CSS tags into the stylesheet under the sidebar class. Can anybody help?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Usually the best way to position a sidebar is using floats. Here’s a good resource: http://css.maxdesign.com.au/floatutorial/

    Thread Starter hinata_chan

    (@hinata_chan)

    I still can’t get things to work. My content is still pushing down my sidebar. I guess I will try to make a new design over from scratch.

    Using the ‘margin: 0px 0px 0px 0px’ tag in my css

    That should be margin:0px 0px 0px 0px;

    I don’t know if that’s the issue or not. Link?

    I noticed typos in the second code example also. Maybe these are just typos in typing your post, but if you are that prone to typos in example code, the first thing I would do is doublecheck all your CSS for typos. Otherwise, you’re liable to create a new theme from scratch and still run into similar problems.

    Thread Starter hinata_chan

    (@hinata_chan)

    I don’t see any typos, I have done everything correctly. I only forgot the “;” in the post.

    I have discovered something. Not only does the sidebar get pushed down by the theme I have made, it also gets pushed down in another theme that I downloaded. It is called “sweet pink” and is viewable on the WordPress Theme Viewer. It shows up perfectly there, but for some reason when I view it on my site the sidebar is pushed down.

    What kind of content do you have in your posts? I’ve seen images in posts do that type of thing. You also didn’t mention if you tried the float.

    Thread Starter hinata_chan

    (@hinata_chan)

    I did try the float. That was actually what I had on it before, I believe. My content only has one post, no images.

    Then as others have suggested, a link would be helpful.
    Depending on what browser you are using, the Firefox web developer plugin with the the edit CSS on the fly module is a great tool for working on what you are doing. You might want to take a look at it. You can manipulate the CSS, without actually changing the file.

    Thread Starter hinata_chan

    (@hinata_chan)

    I’m using internet explorer. If what you are talking about works with my browser, I will consider trying it.

    Oh, and the link to my blog is http://kokoro.digital-memoirs.net. Right now both the content and sidebar are not where I want them to be because I am messing around with it. Now as I’m trying to reposition the content, it doesn’t want to move at all. I don’t know what I am doing wrong.

    Thread Starter hinata_chan

    (@hinata_chan)

    Ahh, nevermind. I think I’ve found a way to test out layouts and designs locally on my computer, so I’ll just mess around with it until I figure out what is wrong. However if I still have problems I will come back to here. If anybody has any insight as to why this problem is occuring, please don’t hesitate to tell me – I will be coming back here off and on.

    you may want to clean up some of the validation errors first.
    You also may want to create a div to wrap(alot just use the div “wrapper”. To place your sidebar and narrowcolumn within.
    Also, you have your page set to 760px, but your image is 1000, so it’s getting cut off, you may want to reduce the width of the image to 760 so the whole thing fits within a 800×600 screen.
    Just some suggestions. But I think this could get you in the right direction.

    You have a couple of <p> in the sidebar and with some themes I’ve noticed the same problem. The <p> is perfectly legitimate HTML, validates and still for some reason with some styles IE pushes the sidebar down the page if there’s a <p> in certain places. I always use two <br/> or just put everything in lists instead, because it’s easier than trying to remember to double check every minor template change in Internet Explorer.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Sidebar positioning problem’ is closed to new replies.