How to place a div on the right side with absolute position

HtmlCssCss PositionAbsolute

Html Problem Overview

I've a page where a dynamic message box has to be displayed without disturbing the actual page. This message box has to appear at the top right corner of the page overlapping the existing contents.

I've tried to use position: absolute but then I'm unable to place it in the right corner. Also I'm unable to use left since I've to support responsive design from Bootstrap.

Here is a sample markup

<html>
    <body>
        <div class="container">
            <!-- Need to place this div at the top right of the page-->
            <div class="ajax-message">
                <div class="row">
                    <div class="span9">
                        <div class="alert">
                            <a class="close icon icon-remove"></a>
                            <div class="message-content">
                                Some message goes here
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Page contents starts here. These are dynamic-->
            <div class="row">
                <div class="span12 inner-col">
                    <h2>Documents</h2>
                </div>
            </div>
        </div>
    </body>
</html>

This message box should have a width of 50% with respect to the .container and the left side of the message box should not be overlapped by it. ie we should be able to click/select the contents of the left side.

Please find a sample here.

Please help me to solve this problem.

Html Solutions

Solution 1 - Html

yourbox{
   position:absolute;
   right:<x>px;
   top  :<x>px;
}

positions it in the right corner. Note, that the position is dependent of the first ancestor-element which is not static positioned!

EDIT:

I updated your fiddle.

Solution 2 - Html

yourbox {
   position: absolute;
   left: 100%;
   top: 0;
}

left:100%; is the important issue here!

Solution 3 - Html

For top right corner try this:

position: absolute;
top: 0;
right: 0;

Solution 4 - Html

You can use "translateX"

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
	text-align: right;
}
.absolute-right{
	display: inline-block;
	position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

Solution 5 - Html

Simple, use absolute positioning, and instead of specifying a top and a left, specify a top and a right!

For example:

#logo_image {
    width:80px;
    height:80px;
    top:10px;
    right:10px;
    z-index: 3;
    position:absolute;
}

Solution 6 - Html

Can you try the following:

float: right;

Solution 7 - Html

I'm assuming that your container element is probably position:relative;. This is will mean that the dialog box will be positioned accordingly to the container, not the page.

Can you change the markup to this?

<html>
<body>
    <!-- Need to place this div at the top right of the page-->
        <div class="ajax-message">
            <div class="row">
                <div class="span9">
                    <div class="alert">
                        <a class="close icon icon-remove"></a>
                        <div class="message-content">
                            Some message goes here
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="container">
        <!-- Page contents starts here. These are dynamic-->
        <div class="row">
            <div class="span12 inner-col">
                <h2>Documents</h2>
            </div>
        </div>
    </div>
</body>
</html>

With the dialog box outside the main container then you can use absolute positioning relative to the page.

Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Css Position Solutions
Recommended Absolute Solutions

Previous Solution:

Is self.__dict__.update(**kwargs) good or poor style?

PythonOopDictionary

Next Solution:

Get Exif data from UIImage - UIImagePickerController

IphoneObjective CIpadExif

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionArun P JohnyView Question on Stackoverflow
Solution 1 - HtmlChristophView Answer on Stackoverflow
Solution 2 - HtmlZ. Rahman RajuView Answer on Stackoverflow
Solution 3 - HtmlYosef TukachinskyView Answer on Stackoverflow
Solution 4 - HtmlAlexander IvashchenkoView Answer on Stackoverflow
Solution 5 - Htmln8glennView Answer on Stackoverflow
Solution 6 - HtmlKristofMolsView Answer on Stackoverflow
Solution 7 - HtmlStephen ReidView Answer on Stackoverflow