Solved

Need Help with Positioning Right SideBar

Posted on 2011-03-22
2
407 Views
Last Modified: 2012-06-21
We are developing a new web site and modeling some different designs. I'll probably turn this over to a professional, but in the meantime can anyone explain to me why the div id="right-side-bar" in this layout will not position as expected in the top right are of the ancestor containing it?

http://dev.himalayanacademy.com/books

Look for the words "Genius Links" which i just dummy text in the div, which now falls below instead of in the right area where I want it to go. It should sit right to the right of the #main-book-container. There's room there, I can't figure why it gets pushed down.
0
Comment
Question by:Sivakatirswami
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 3

Accepted Solution

by:
quinks earned 500 total points
ID: 35195799
#right-side-bar {
    -moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
    background-color: #D2D5DF;
    position: absolute;
    right: 0;
    top: 0;}

#main-content {
    background-color: #F7F4EA;
    position: relative;}
0
 

Author Comment

by:Sivakatirswami
ID: 35201656
Oh boy! I was sure I had tried absolute positioning in an earlier iteration. I was worried that if a horizontal div was added above that this div would get stuck on top other items on top if they moved down.

But not I see that absolute position is relative to the containing ancestor. I know I have read that so many times, but I keep making the fundamental conceptual mistake in  thinking that "absolute" is relative to the browser window...

Maybe doing CSS at the end of a long day it not a good idea ! Thanks Quinks
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
tiny glitch in my main slider 3 57
boostsrap 1 31
center text in div with CSS3 2 26
center div inside another div 2 29
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question