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
Preventing Overlap of Multiple Fixed Positioned Elements
Angular, Image Not Found (Get 404)
How to Disable a Text Area or Mat-Form-Field
Maxlength Ignored for Input Type="Number" in Chrome
Angular: Using the Ternary Operator in HTML Template
Can You Provide Some Examples of Why It Is Hard to Parse Xml and HTML With a Regex
Applying an Ellipsis to Multiline Text
Two Submit Buttons in One Form
Floated Elements of Variable Height Push Siblings Down
Google Chrome Does Not Autoplay Html5 Video on Mobile
Fixed Header Table With Horizontal Scrollbar and Vertical Scrollbar On
Loading Images from External Folder to Component Angular 2
How to Set Textarea to 100% Width and Height
How to Stop Background from Jumping to the Top on Modal Toggle
Targeting Flex Items on the Last or Specific Row