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

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


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

Tags:

Html

Css

Recent Posts