WordPress.org

Ready to get started?Download WordPress

Forums

Trouble floating sidebar? (23 posts)

  1. dawg
    Member
    Posted 9 years ago #

    I can position the sidebar but with different resolutions it gets awkward.

    When I float it right, it sits under the footer in the classic. Page validates so I thought a fresh pair of eyes could figure it out.

    http://cafe789.com/kyles_eyes/

  2. Lorelle
    Member
    Posted 9 years ago #

    Okay, first thing, you seriously need to clean up your CSS file. There is spacing for "presentation look" and then there is excessive. There is at least one empty space between every line, sometimes four. It's hard to read, but more importantly, it makes the style.css file LARGER. The bigger it is, the longer it takes to load. I'd just do some search and replace of the double line breaks to single breaks. Just some housekeeping.

    Now, to your issue! You have a HUGE right margin on your content:

    margin: 30px 17em 0 4em;

    17 em is huge. This adds a lot of "space" to the margin of your main content. I'd change it to 17px or something much smaller than em sizes. That is pushing your sidebar down, I bet. Give that a try.

  3. dawg
    Member
    Posted 9 years ago #

    Thanks for your suggestion! As far as css goes, I was working on something and added a css file from an html page that I was going to incorporate but it has css that does not even pertain to the index.php et cetera

  4. dawg
    Member
    Posted 9 years ago #

    I took that out from the content div and my css is cleaned up now, however I do not think it has to do with my css.

    I think there is a missing div tag that is the culprit, I just do not know where.

  5. dawg
    Member
    Posted 9 years ago #

    Anyone with an idea?

  6. moshu
    Member
    Posted 9 years ago #

    Check out this site
    http://tantek.com/CSS/Examples/boxmodelhack.html
    Not sure, but the solution might be there.

  7. moshu
    Member
    Posted 9 years ago #

    p.s. According to the validation results there is no missing div tag.

  8. cavemonkey50
    Member
    Posted 9 years ago #

    Try using relative positioning. I found that it is very difficult to float a right hand sidebar.

  9. dawg
    Member
    Posted 9 years ago #

    Thanks cavemonkey50

    I had it positioned like that at first but wanted to float it so that no matter what resolution it would sit correctly.

    The only thing was when a res was larger than 1024 x 768 it would be out of alignment slighty however after one day of trying to figure it out floating to no success, I most likely will position it again.

  10. Ming
    Member
    Posted 9 years ago #

    Hey Dawg,
    One of the tricks to floats is that they have to come first in the source code. So you need to move your sidebar above the content. If your index.php is standard that should be as simple as moving the include('sidebar.php') line above div id="content".

    Also, you need to remove 'clear: both' from .feedback If you don't you'll have a big gap in your post where the feedback line is pushed down to match the end of the sidebar.

    Easy mistakes:
    - Don't forget your title
    - You'll probably want to change .menu to #menu in style.css and div class="menu" to div id="menu" in index.php. You should do this because the rest of your menu styles use ID instead of class (ie #menu form, #menu input). If you don't change it they won't have any affect.

  11. Root
    Member
    Posted 9 years ago #

    At the risk of pimping my own design your layout would be ideal for a Gemini template. It is really robust and it was designed to cope with the very issue you have.

  12. dawg
    Member
    Posted 9 years ago #

    Ming thanks alot, that was the fix and it took all of two seconds to do it.

    I moved the get sidebar above the content and bing proper alignment.

    Thanks a lot for pointing this out as I would not have thought of this, I spent much time changing/removing/adding divs to no avail working with the footer/header/main/sidebar and it was so simple.

  13. Lorelle
    Member
    Posted 9 years ago #

    Just a note to Ming and others, the layout of your structure is NOT dependent upon the layout of your page. You can have the sidebar, as an example, at the bottom of the structure and have it show up anywhere on the page. Look at the amazing designs at http://www.csszengarden.com/ as an example. EVERY design follows the exact same structure and content. The only thing that changes is the style sheet. A few minutes looking and you will see the sidebar (for example) on the left, right, center, top, bottom, in between, going sideways, all kinds of things.

    That's the magic, and frustration, of CSS.

  14. Root
    Member
    Posted 9 years ago #

    The Jeffrey Zeldman solution to the source order / floats conundrum - which I use is to float the menu AND the content. Once I learnt that life got easier.

  15. dawg
    Member
    Posted 9 years ago #

    Just a note to Ming and others, the layout of your structure is NOT dependent upon the layout of your page. You can have the sidebar, as an example, at the bottom of the structure and have it show up anywhere on the page. Look at the amazing designs at http://www.csszengarden.com/ as an example. EVERY design follows the exact same structure and content.
    Quote Lorelle

    Well the structure of it obviously had to do with it in my case, I am not sure you can use an example of ccszengarden that is html versus all the php that is going on within WP. I have never had trouble floating items in html/xhtml

  16. Ming
    Member
    Posted 9 years ago #

    If it's wrong, then why does it work? ;-)

    http://archivist.incutio.com/viewlist/css-discuss/31743

    Root has a good point. If all the columns are floated you can play with the source order. Another possibility is to change which column is floated. For instance, instead of floating the sidebar right why not float the content left? Then it can come first in the source order. Check out the default WordPress stylesheet since that's what it does.

    In terms of accessibility issues and (possibly) search engines I would recommend either floating left or floating both.

  17. Root
    Member
    Posted 9 years ago #

    I agree. :)

  18. dawg
    Member
    Posted 9 years ago #

    Just a quick note to Ming, I was/am in support of your suggestion, and was just quoting Lorelle assessment which I believe is wrong.

    When I did what you suggested it worked like a charm! again thanks

  19. Root
    Member
    Posted 9 years ago #

    The CSS Zen Garden thing is no doubt very cool. But blogs have a very clear difference in specification: We do not know how long our cols are. That rules out a lot of CSS 2 position absolute stuff.

  20. Ming
    Member
    Posted 9 years ago #

    No offense taken by anyone. Discussion forces me to make sure what I said was correct (and depending on the night that can be a 50-50 proposition).

    Personally, I intend to master floats. I also expect to accomplish this shortly before the sun burns out ;-)

  21. Root
    Member
    Posted 9 years ago #

    Well good luck. And if you do let us know how you did it :)

  22. davidchait
    Member
    Posted 9 years ago #

    Yes, there are solutions to the flexible-column-length problem, which exist out on a half-dozen sites on the net. I've been working on a hacked 3-col Kubrick, and because I was being 'forced' into a pre-designed CSS, I ended up requiring the left sidebar come before the content. I might try to address that again, but didn't want to spend much time. ;)

    Fixed width, abs-positioned layouts actually make things much simpler -- CHAITGEAR originally was fixed-width sidebars but fluid content block. It was too hard to 'control' the look of the site on different machines, so I went to a completely fixed layout. Easier to manage. ;)

    -d

  23. Root
    Member
    Posted 9 years ago #

    Or you could just install either Trident or Vesuvius.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.