WordPress.org

Ready to get started?Download WordPress

Forums

Weird Stylesheet Behavior on Single.php (7 posts)

  1. Jonathan
    Member
    Posted 2 years ago #

    I am in the process of theming my wordpress install with a custom theme. I have almost every thing how I want it, except for one thing.

    When displaying the post content on single.php, my sidebar gets pushed right up to the edge of the content. I'm not sure why as the entire rest of the blog styles properly.

    Proper style:
    http://jwgeorge.com/blog/

    Wrong style:
    http://www.jwgeorge.com/blog/2011/07/12/something-aint-right/

    I would much appreciate any help with the matter.

  2. peredur
    Member
    Posted 2 years ago #

    This does it for me (in FireFox):


    #content {
        float: left;
        width: 940px;
    }

    Something is making the #content div narrower. I can't see what it is, offhand, but adding the width seems to put it right. I only tested in Firefox, though.

    HTH

    PAE

  3. nsathees
    Member
    Posted 2 years ago #

    try removing

    #content {
    float: left;
    }

  4. peredur
    Member
    Posted 2 years ago #

    Yes. What's going on here is that the #content block element, because it's floated, is exactly as wide as its content. Whereas non-floated blocks, by default, have a width of 100% of their parent.

    So, in this case, something has altered the total width of the content of the #content block element to make it narrower. I'm not sure what it is although I haven't looked very hard.

    So, either giving the floated element (#content) a suitable width (i.e. the same width as its parent) or stopping it from being a float will work. Both will do the job as long as they don't have any knock-on effects. Neither appears to in this case.

    If it was my site, I think I'd play around a bit to see what had altered to make the content of #content narrower. Fixing that might be the best solution, if it's not too hard to find.

    Cheers

    PAE

  5. irfan_np
    Member
    Posted 2 years ago #

    Give style of #content as

    #content{
       float:left;
       width:100%;
    }
  6. Jonathan
    Member
    Posted 2 years ago #

    Thanks for all the replies everyone! I figured it out, however, not sure why it is this way. I could not get wordpress to behave if I put the stylesheet in a directory called "css" so I placed style.css in the theme directory with some basic styling in it, then importing my other style sheets.

    I left out this in style.css:

    #content {
    	float: left;
    	width: 940px;
    }

    and once added, the theme seemed to work correctly. All is good now!

  7. peredur
    Member
    Posted 2 years ago #

    When you create a theme or sub-theme, the file style.css is a mandatory file in your theme's directory. You can create other style sheets and put them in a separate folder if you want. Then you can either import them into your style.css file (@import) or you can reference them in your HTML head section using:

    <?php get_stylesheet_directory_uri() ?> . '/mycssdirectory/mysheet.css'

    The Codex Function Reference has more detail. Note that the Codex says that this function is:

    ... most appropriately used for links, referencing additional stylesheets...

    HTH

    PAE

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags