WordPress.org

1. CJHA
   Member
   Posted 8 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 http://www.ramblingirish.com. It's the Weaver 2010 theme.

2. Phil
   Member
   Posted 8 months 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.

   Phil

3. Phil
   Member
   Posted 8 months 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
   Member
   Posted 8 months 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
   Member
   Posted 8 months ago #

   No problem fella. Looks good now :)

Reply

You must log in to post.