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>Should do it. Assuming you don't need it to flow.
You can simply add a right float to .block2 element and place it in the first position (this is very important).
Here is the code:
<html>
<head>
<style type="text/css">
.block1 {
color: red;
width: 100px;
border: 1px solid green;
}
.block2 {
color: blue;
width: 70px;
border: 2px solid black;
position: relative;
float: right;
}
</style>
</head>
<body>
<div class='block1'>
<div class='block2'>block2</div>
<p>text</p>
<p>text2</p>
</div>
</body>
Regards...
<div class='block1'>
<p style="float:left">text</p>
<div class='block2' style="float:right">block2</div>
<p style="float:left; clear:left">text2</p>
</div>
You can clear:both or clear:left depending on the exact context.
Also, you will have to play around with width to get it to work correctly...