Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Irritating behaviour of positioning: absolute

Irritating behaviour of positioning: absolute

Problem

As per my knowledge, Absolute positioned element and floated element are removed from the normal flow of html (correct me if i am wrong).

Here's my jsFiddle

Here's my code:

my css:

.content-area {
position: relative;
min-height: 310px;
background-color: #bbb;
}
.left-sidebar {
position:absolute;
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
position: absolute;
right: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}

when i write anything inside my main-area why does the right-sidebar slides to down.

Problem courtesy of: shubendrak

Solution

Add a top property to the side bar

.right-sidebar {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}

When position absolute is specified you are expected to position the element, meaning you must set its top, bottom, left and right properties to the values you desire. If one of these properties is not set the browser positions them, since they will be set to auto.

Solution courtesy of: Kevin Bowersox

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Irritating behaviour of positioning: absolute

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×