Absolute Positioning/Sidebar Issue

  • Resolved CJHA

    (@cjha)


    13 years, 5 months 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 https://www.ramblingirish.com. It’s the Weaver 2010 theme.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Phil

    (@owendevelopment)

    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.

    Phil

    Phil

    (@owendevelopment)

    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.

    Thread Starter CJHA

    (@cjha)

    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!

    Phil

    (@owendevelopment)

    No problem fella. Looks good now ??

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Absolute Positioning/Sidebar Issue’ is closed to new replies.