[resolved] Absolute Positioning/Sidebar Issue (6 posts)

  1. CJHA
    Posted 4 years ago #

    CSS novice needs help on little issue...

    I have my sidebar-widget areas to the right of my content, using absolute positioning to place it in the top-right of the content area.

    Problem is, it's absolute in relation to the viewport or whole screen, depending on how much the browser is zoomed...

    How do I get it to sit in the top-right corner of the container, to the right of the content and below the header ALL THE TIME.

    I've toyed about with relative and fixed positioning to no avail. Originally I was using float to put it to the right, which works only it gets pushed to the bottom of the container.

    I tried correcting this by reducing margins, padding and widths but all efforts were futile.

    I've scoured google and wordpress forums for hours now and I'm really stumped....

    Can somebody please help me sort this issue and let me know what I need to do to fix it?

    My site is http://www.ramblingirish.com. It's the Weaver 2010 theme.

  2. Phil
    Posted 4 years ago #

    Ok. To solve this:

    In style.css:

    1. Add this to existing #main:

    #main {
    postion: relative;

    2. Add this to styleweaver.css #primary (line 101):

    #primary {
    background-color: #FFFFFF;
    margin-bottom: 5px;
    padding-left: 10px;
    padding-top: 10px;
    position: absolute;
    right: 0;
    top: 46px;

    I added 46px to bring the top of the sidebar to the underline of the menu item on left, but you can decrease it to make it higher if required.

    Hope this helps.


  3. Phil
    Posted 4 years ago #

    We first make #main relatively positioned. This is required for positioning #primary after.

    Then by making #primary absolutely positioned (but inside #main), we can then stipulate exactly where you want the sidebar to sit.

  4. CJHA
    Posted 4 years ago #

    Dude, you know what you are?

    A leg-end :)

    Works perfect. I was getting very frustrated with something that I knew had a simple fix.

    Cheers buddy, appreciate it!

  5. Phil
    Posted 4 years ago #

    No problem fella. Looks good now :)

  6. mrmbsanchez
    Posted 3 years ago #

    There is a great chapter on this in CSS the missing manual. This is a really good reference book and comes with downloadable exercise files. The other two books I use for CSS are Stylin' with CSS and Bulletproof Web Design.

Topic Closed

This topic has been closed to new replies.

About this Topic