artur47wien artur47wien - 2 months ago 5
CSS Question

Div located on the corner of another div

With code lik this I can put div2 in the bottom right corner of a div1,
html:

<div id="div1">
<p>text</p>
<p>text2</p>
<div id="div2">div2</div>
</div>


css:

#div1 {
background: green;
width: 100px;
border: 2px solid green;
position: relative;
}

#div2 {
background: red;
width: 50px;
border: 2px solid red;
position: absolute;
bottom: 0px;
right: 0px;
}


but how can I put the div2 on a corner like this:
enter image description here

Answer

There is a very simple solution to this question. First, you remove the position: absolute from #div2.

Then, you give a fixed height of 95px on #div1.

After, you simply put margin-left set to 70px on #div2.

Here is a working snippet.

#div1 {
  background: green;
  width: 100px;
  height: 95px;
  border: 2px solid green;
  position: relative;
}

#div2 {
  background: red;
  width: 50px;
  border: 2px solid red;
  margin-left: 70px;
}
<div id="div1">
  <p>text</p>
  <p>text2</p>
  <div id="div2">div2</div>
</div>

Comments