Solved

Need Help with Positioning Right SideBar

Posted on 2011-03-22
2
386 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
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS Scroll Issue 3 117
Remove greater than sign 3 67
A simple Float not working. 5 19
Problem with spacing columns on a row in a table 10 23
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

813 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now