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

Question

Can I somehow use CSS to place the block2 in top right corner of block1   Context    block2 must be the  very  last inside HTML code of block1 or it could be placed after block1  I can t make it the first element in block1  Within block1 there could be  lt p gt   images  text and it is beyond my control to know what and how many  Also I need the block2 to flow    Code    x000D   x000D   block1       color  red      width  100px      border  1px solid green      block2       color  blue      width  70px      border  2px solid black      position  relative    x000D   lt div class  block1  gt       lt p gt text lt  p gt       lt p gt text2 lt  p gt       lt div class  block2  gt block2 lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Displaying left middle and right of there parents. If you have more then 3 elements then use nth-child() for them.

HTML sample:

<body>
    <ul class="nav-tabs">
        <li><a  id="btn-tab-business" class="btn-tab nav-tab-selected"  onclick="openTab('business','btn-tab-business')"><i class="fas fa-th"></i>Business</a></li>
        <li><a  id="btn-tab-expertise" class="btn-tab" onclick="openTab('expertise', 'btn-tab-expertise')"><i class="fas fa-th"></i>Expertise</a></li>
        <li><a  id="btn-tab-quality" class="btn-tab" onclick="openTab('quality', 'btn-tab-quality')"><i class="fas fa-th"></i>Quality</a></li>
    </ul>
</body>

CSS sample:

.nav-tabs{
  position: relative;
  padding-bottom: 50px;
}
.nav-tabs li {
  display: inline-block;  
  position: absolute;
  list-style: none;
}
.nav-tabs li:first-child{
  top: 0px;
  left: 0px;
}
.nav-tabs li:last-child{
  top: 0px;
  right: 0px;
}
.nav-tabs li:nth-child(2){
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
}

User · Answer

lt div class  block1  gt       lt p  style  float left  gt text lt  p gt       lt div class  block2  style  float right  gt block2 lt  div gt       lt p  style  float left  clear left  gt text2 lt  p gt     lt  div gt    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

User · Answer

x000D   x000D   block1   x000D      color  red  x000D      width  100px  x000D      border  1px solid green  x000D      position  relative  x000D    x000D   x000D   block2   x000D      color  blue  x000D      width  70px  x000D      border  2px solid black  x000D      position  absolute  x000D      top  0px  x000D      right  0px  x000D    x000D   lt div class  block1  gt  x000D     lt p gt text lt  p gt  x000D     lt p gt text2 lt  p gt  x000D     lt div class  block2  gt block2 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Should do it  Assuming you don t need it to flow

User · Answer

If you can add another wrapping div  block3  you could do something like this     lt html gt         lt head gt         lt style type  text css  gt         block1  color red width 120px border 1px solid green  height  100px          block3  float left  width 10px          block2  color blue width 70px border 2px solid black position relative float right          lt  style gt         lt  head gt        lt body gt       lt div class  block1  gt            lt div class  block3  gt               lt p gt text1 lt  p gt               lt p gt text2 lt  p gt           lt  div gt            lt div class  block2  gt block2 lt  DIV gt        lt  div gt        lt  body gt       lt  html gt

User · Answer

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    lt html gt   lt head gt       lt style type  text css  gt           block1               color  red              width  100px              border  1px solid green                     block2               color  blue              width  70px              border  2px solid black              position  relative              float  right                 lt  style gt   lt  head gt   lt body gt       lt div class  block1  gt           lt div class  block2  gt block2 lt  div gt           lt p gt text lt  p gt           lt p gt text2 lt  p gt       lt  div gt   lt  body gt      Regards

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

Examples related to html

Examples related to css