How to Place Div in Top Right Hand Corner of Page

How to place div in top right hand corner of page

the style is:

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

hope it will work.
Thanks

Placing an image to the top right corner - CSS

You can just do it like this:

<style>
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
</style>

<div id="content">
<img src="images/ribbon.png" class="ribbon" alt="" />
<div>some text...</div>
</div>

How do I design a div with a top right corner icon?

I see you already have answers that explain how to use relative and absolute positioning, but I created a JS fiddle in the meantime :)

Link to JS fiddle with example

HTML:

<div id="box">
<div id="icon">
|>
</div>
Contents of the box
</div>

CSS:

#box {
position: relative;
width: 200px;
height: 200px;
padding: 10px;
margin: 100px;
background-color: white;
}

#icon {
background-color: green;
color: white;
padding: 10px;
width: 20px;
height: 20px;
position: absolute;
right: -20px;
top: -20px;
}

how to place last div into right top corner of parent div? (css)

.block1 {    color: red;    width: 100px;    border: 1px solid green;    position: relative;}
.block2 { color: blue; width: 70px; border: 2px solid black; position: absolute; top: 0px; right: 0px;}
<div class='block1'>  <p>text</p>  <p>text2</p>  <div class='block2'>block2</div></div>

fixing one div to second div top right corner with css

Try something like this:

#outer {
position: relative;
overflow: hidden;
height: 100px;
}

#name {
position: absolute;
right: 0;
}

Position icon at the top right corner of a div

You can add an icon like your showing image, here is the solution

HTML:-

<div class="circletop">
<div class="numberpr">3° anno</div>
<div class="lordo">Valore lordo stimato</div>
<!--I add div icon here-->
<div class="icon">my icon</div>
<div class="valori"> € 65.000 - € 67.000</div>
</div>

CSS:-

.circletop {
/* circle styles */
width: 300px;
height: 300px;
font-family: Raleway;
border: 1px solid #222;
border-radius: 50%;
margin: 0 auto;
box-shadow: 0 0 20px #ccc;

/* become a flex container */
/* its children will be flex items */
display: flex;
/* place items in column */
flex-direction: column;
/* center flex items horizontally */
align-items: center;
/* center all content vertically */
justify-content: center;
}

/* simulate one more item to "balance" dex text */
.circletop:before {
content: "\A0";
visibility: hidden;
}

.lordo {
color: #45cec8;
padding-top: 10px;
padding-bottom: 25px;
font-weight: bold;
font-size: 19px;
}

.valori {
border-radius: 50px;
background: #05c6bf;
padding: 14px;
width: 100%;
color: #fff;
text-align: center;
box-shadow: 0 0 9px #45cec8;
font-size: 25px;
font-weight: bold;
}
.icon {
position: relative;
bottom: -19px;
right: -162px;
}

Getting the button into the top right corner inside the div box

Just add position:absolute; top:0; right:0; to the CSS for your button.

 #button {
line-height: 12px;
width: 18px;
font-size: 8pt;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
}

jsFiddle example

css: how to position a X sign at the top right corner of the img element

You can use absolute position on the X sign and set its position with respect to the relatively positioned parent.

document.querySelector('.close').addEventListener('click', function() {  console.log('close');});
.wrapper {  position: relative;  display: inline-block;}.close:before {  content: '✕';}.close {  position: absolute;  top: 0;  right: 0;  cursor: pointer;}
<div class="wrapper">  <img src="https://www.google.com/images/srpr/logo11w.png" />  <span class="close"></span></div>

Position absolute, top right hand corner (resizing)

ID and NAME tokens must begin with a letter, that is why your #1 and #2 styles are not applying, change them to something like #a1 or #a2

UPDATE:

Just add float:right; to your #main div

Working demo



Related Topics



Leave a reply



Submit