Rectangle 27 25

The CSS3 background-position spec allows you to change the anchor point from the top left to anything you want. For example, the following will set the lower bottom corner of the image 1em from the right and 2px from the bottom:

background-position: right 1em bottom 2px;

As of April 2013, only IE6-8 and some fringe browsers lack support.

html - Place background image 1em from the right? - Stack Overflow

html css xhtml
Rectangle 27 66

the style is:

<style type="text/css">
 .topcorner{
   position:absolute;
   top:0;
   right:0;
  }
</style>

If you're using absolute positioning, why float? Why not just right: 0?

yeah you can also use right:0

html - How to place div in top right hand corner of page - Stack Overf...

html css
Rectangle 27 14

.topcorner{
    position:absolute;
    top:10px;
    right: 10px;
 }

you can play with the top and right properties.

If you want to float the div even when you scroll down, just change position:absolute; to position:fixed;.

html - How to place div in top right hand corner of page - Stack Overf...

html css
Rectangle 27 3

<style type="text/css">
 .topcorner{
  position:absolute;
  top:10;
  right:15;
  }
</style>

You ca also use this in CSS external file.

html - How to place div in top right hand corner of page - Stack Overf...

html css
Rectangle 27 38

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!

html - How to place a div on the right side with absolute position - S...

html css css-position absolute
Rectangle 27 38

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!

html - How to place a div on the right side with absolute position - S...

html css css-position absolute
Rectangle 27 2

I kind of started from scratch again. I used fixed positions based on top, bottom, right, left, height and width -values. For the yellow div I only used a top and bottom value. This will result in the container adapting on resizing the browser. The other containers all have a fixed height. Note that it does not matter at all where the divs are in the html for fixed positions. Finally I placed the content using margins to avoid the fixed elements. Check out the code and you should be able to figure it out: JSFiddle

I hope this is what you are looking for (because I wasn't 100% about sure what you wanted). I guess I ll hear that soon :).

<div id="header"></div>
<div id="content">
    <div id="dummytext"></div>  
</div>
<div id="divA"></div>
<div id="divB"></div>
<div id="footer"></div>
#header{/*changed closing tags in html to: <div id="header"></div>*/
    position: fixed;
    top: 0px;
    height: 50px;
    left: 0px;
    right: 0px;
    background-color: blue;
    border-bottom: white solid 20px;
}
#divA{ 
    position: fixed;   
    bottom: 170px; /*no height but top/bottom values so containers height changes based on browsersize*/
    top: 70px;
    left: 0px;
    right: 50%;
    background-color: yellow;
}
#divB{
    position: fixed;   
    bottom: 70px;
    height: 100px;
    left: 0px;
    right: 50%;
    background-color: red;

}
#footer{
    position: fixed;
    bottom: 0px;
    height: 50px;
    left: 0px;
    right: 0px;
    background-color: blue; 
    border-top: white solid 20px;
}
#content{
    margin: 70px 2% 70px 55%; /*margins to place scrollable content avoiding fixed content to appear on top of the content*/ 
}
#dummytext{/*Just some dummy text to see what happens with scrollbar*/
    height: 1000px;
    width: 100%; 
    background: linear-gradient(red, orange, yellow, green, blue);/*all colors of the rainbow, just because..*/
}

html - Positioning a relative div in another relative div with dynamic...

html css
Rectangle 27 27

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

left:100%; is the important issue here!

left:100% puts the LEFT edge of the div at the far right side of the window, so the rest of the div is hidden. left:94% worked for me. Great solution, thanks.

html - How to place a div on the right side with absolute position - S...

html css css-position absolute
Rectangle 27 26

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

left:100%; is the important issue here!

left:100% puts the LEFT edge of the div at the far right side of the window, so the rest of the div is hidden. left:94% worked for me. Great solution, thanks.

html - How to place a div on the right side with absolute position - S...

html css css-position absolute
Rectangle 27 6

.right{
    float:right;
    width:60px;
    height:60px;
    background:green;
}
.left{
    overflow:hidden;
    border:2px solid yellow;
    background:red;
    height:60px;
}
<div class="right">right</div>
<div class="left">left</div>

css - Div at 100% of page width, minus the width of a fixed div on the...

css html width inline placement
Rectangle 27 1

You can use css float

<div style='float: left;'><a href="login.php">Log in</a></div>

<div style='float: right;'><a href="home.php">Back to Home</a></div>

html - How to place div in top right hand corner of page - Stack Overf...

html css
Rectangle 27 1

I had been thinking about this for a while. You can actually absolute position an element from the center of a container instead of the corners by adding a div inside the container. This inner container, or reference container, is 50% height and 50% width of the parent container. Then you can position relative to the bottom right corner.

<div class="container">
  <div class="container-inner">
    <div class="pointer pointer-1" data-name="pointer-1"></div>
    <div class="pointer pointer-2" data-name="pointer-2"></div>
  </div>
</div>

This is the container we want to place pointers in

html, body {
  height: 100%;
}

.container {
  height: 80%;
  width: 80%;
  margin: 0 auto;
  border: 1px solid blue;
}

We use this container to get a center point that we can use as a reference. We use the bottom right corner of this div as our reference point.

.container-inner {
  border: 1px dashed red;
  height: 50%;
  width: 50%;
  position: relative;
}

Create a couple of targets 60px in diameter

.pointer {
  height: 40px;
  width: 40px;
  background-color: orange;
  border: 10px solid red;
  border-radius: 60px;
  position: absolute;
}

Center target one in the center of the container

.pointer-1 {
  bottom: calc(-0% - 30px);
  right: calc(-0% - 30px);
}

Position target 2 25% right and down from the container center.

.pointer-2 {
  bottom: calc(-50% - 30px);
  right: calc(-50% - 30px);
}

You can see a working demo of this JSBin.

javascript - Absolutely position element based on center - Stack Overf...

javascript html css
Rectangle 27 16

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}
<div class='button'>Hello</div>

Using ::after you are styling the virtual last child of the selected element. content property creates an anonymous replaced element.

We are containing the pseudo element using absolute position relative to the parent. Then you have freedom to have whatever custom background and/or border in the background of your main element.

This approach does not affect placement of the contents of the main element, which is different from using box-sizing: border-box;.

Here .button width is constrained using the parent element. Setting the border-left-width adjusts the content-box size and thus the position of the text.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}
<div class='parent'>
    <div class='button'>Hello</div>
</div>

Using the pseudo-element approach does not affect the content-box size.

Depending on the application, approach using a pseudo-element might or might not be a desirable behaviour.

:Before

Outstanding! The only solution that worked for me on anchor tag containing gallery image. I like the fact that it doesn't scale down the image, but visually clips edges instead.

html - Placing border inside of div and not on its edge - Stack Overfl...

html css css3 border
Rectangle 27 16

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}
<div class='button'>Hello</div>

Using ::after you are styling the virtual last child of the selected element. content property creates an anonymous replaced element.

We are containing the pseudo element using absolute position relative to the parent. Then you have freedom to have whatever custom background and/or border in the background of your main element.

This approach does not affect placement of the contents of the main element, which is different from using box-sizing: border-box;.

Here .button width is constrained using the parent element. Setting the border-left-width adjusts the content-box size and thus the position of the text.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}
<div class='parent'>
    <div class='button'>Hello</div>
</div>

Using the pseudo-element approach does not affect the content-box size.

Depending on the application, approach using a pseudo-element might or might not be a desirable behaviour.

:Before

Outstanding! The only solution that worked for me on anchor tag containing gallery image. I like the fact that it doesn't scale down the image, but visually clips edges instead.

html - Placing border inside of div and not on its edge - Stack Overfl...

html css css3 border
Rectangle 27 4

The simple factual explanation for why this happens is that the offset properties top, right, bottom and left actually respect the corresponding margin properties on each side. The spec says that these properties specify how far the margin edge of a box is offset from that particular side. The margin edge is defined in section 8.1.

So, when you set a top offset, the top margin is taken into account, and when you set a left offset, the left margin is taken into account.

If you had set the bottom offset instead of the top, you'll see that the bottom margin takes effect. If you then try to set a top margin, the top margin will no longer have any effect.

If you set both the top and bottom offsets, and both top and bottom margins, and a height, then the values become over-constrained and the bottom offset has no effect (and in turn neither does the bottom margin).

If you're looking to understand why the spec defines offsets this way, rather than why browsers behave this way, then it's primarily opinion-based, because all you'll get is conjecture. That said, Fabio's explanation is quite reasonable.

This explanation is clearest for me. The spec says that for absolute elements, top places the edge of the top margin, not the edge of the element top. And similarly, bottom places the edge of the bottom margin not the bottom edge of the element. That makes it clear. But while these margin values will affect the initial, absolute placement of the elements, they never fulfill their normal role as margins, because, of course, the absolute positioning lifts the absolute elements out of the normal flow. The margins don't exist for the elements themselves. Thanks.

html - Why does margin-top affect the placement of an absolute div? - ...

html css
Rectangle 27 2

<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>

html - How to place a div on the right side with absolute position - S...

html css css-position absolute
Rectangle 27 2

<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>

html - How to place a div on the right side with absolute position - S...

html css css-position absolute
Rectangle 27 1

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.

<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.

html - How to place a div on the right side with absolute position - S...

html css css-position absolute
Rectangle 27 1

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.

<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.

html - How to place a div on the right side with absolute position - S...

html css css-position absolute
Rectangle 27 1

$.fn.confirmationPopover = function (passedInOptions) {
  var $view = this;

  var defaultOptions = {
    confirmationLabel: 'Yes',
    container: '.' + this.attr('class'),
    declineLabel: 'No',
    html: true,
    placement: 'left',  //top | left | right | bottom
    rowClasses: false
  };

  if (!passedInOptions.declineClass) {
    passedInOptions.declineClass = passedInOptions.selector + '__popover__decline';
  }

  var obj = {}; //Merged options
  $.extend(true, obj, defaultOptions, passedInOptions);

  var popoverContent = '<div class="row ' + (obj.rowClasses ? obj.rowClasses : 'tac') + '">' +
                        '<button class="button button--small ' + obj.confirmationClass + '">' + obj.confirmationLabel + '</button>' +
                        '<button class="button button--small button--outline ' + obj.declineClass + '">' + obj.declineLabel + '</button>' +
                      '</div>';

  if (!obj.content) {
    obj.content = popoverContent;
  }

  /* Initiate Popover */
  $view.popover(obj);

  /**
   * Bind confirmation Button
   */
  $view.on('click', '.' + obj.confirmationClass, function () {
    var popoverId = $(this).parents('.popover').attr('id');
    var $this = $view.find('[aria-describedBy="' + popoverId + '"]');
    obj.confirmationFunction($this);
  });

  /**
   * Bind decline button
   */
  $view.on('click', '.' + obj.declineClass, function () {
    var popoverId = $(this).parents('.popover').attr('id');
    var $this = $view.find('[aria-describedBy="' + popoverId + '"]');
    if (typeof obj.declineFunction === 'function') {
      obj.declineFunction($this);
    } else {
      $this.popover('hide');
    }
  });

  return this;
};

Thanks @j-santosh, but I'm afraid I have to wait 18 hours before I can do so :)

oh , i don't know that :)

javascript - Bootstrap Popup - Attach event to button for popover dyna...

javascript jquery twitter-bootstrap twitter-bootstrap-3 popover