74

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 <p>, images, text and it is beyond my control to know what and how many.
  • Also I need the block2 to flow.

Code :

.block1 {
    color: red;
    width: 100px;
    border: 1px solid green;
}

.block2 {
    color: blue;
    width: 70px;
    border: 2px solid black;
    position: relative;
}
<div class='block1'>
    <p>text</p>
    <p>text2</p>
    <div class='block2'>block2</div>
</div>

0

5 Answers 5

117

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

5
  • excuse me but what does it mean? you dont need it to flow
    – Radek
    May 16, 2010 at 2:26
  • 4
    He means using absolute positioning or hard coding the position of the element inside of block 1. Usually you try to avoid this solution if possible but in some situations it's what you have to do.
    – Jason Rowe
    May 16, 2010 at 2:31
  • +1 for a useful answer, but i needed something a little different, i needed block2 to be middle/center aligned on the top right corner of block1 .. jsfiddle.net/farinspace/jywqk
    – farinspace
    May 21, 2014 at 16:58
  • This is close, but I'm trying to do something similar and need the content from block one to wrap around block two. Jul 24, 2020 at 15:43
  • This solution places the div in the top right of the page, not the parent div
    – ldobson
    Oct 23, 2022 at 9:39
18

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

2
  • what if i cannot place it in first position, because it is coming from a database server
    – clockw0rk
    Aug 30, 2018 at 12:57
  • The important stuff here is position: relative; float: right; Then to make it top align just put: margin-top:auto;
    – Umar Niazi
    Nov 25, 2021 at 2:00
4
 <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...

6
  • @xander can I work on block1 properties itself instead of what ever inside. The content comes from WordPress so I am not sure how to cover everything within block1 in css
    – Radek
    May 16, 2010 at 2:25
  • @Radek Is there always one (1) div inside of "block1" if so you could target through CSS selector div.block1 div or if div.block1's child has a class then div.block1 div.block2 { float:right; } should do the trick along with div.block1 p { float:left; clear:left }
    – Alex
    May 16, 2010 at 2:29
  • @xander: I like your solution the best but I am struggling to implement it in on this page vk.onalllevels.com/about/limor I cannot tell what elements are going to be inside <div class="format_text">
    – Radek
    May 16, 2010 at 2:52
  • if it helps I can move <div class='block2'>block2</DIV> after definition of block1 in html
    – Radek
    May 16, 2010 at 2:55
  • That would be best. to move it (div.block2) after the first <p> tag that is floated left. Everything else can "flow" after them...
    – Alex
    May 16, 2010 at 3:36
2

If you can add another wrapping div "block3" you could do something like this.

 <html>
      <head>
      <style type="text/css">
      .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;}
      </style>
      </head>

    <body>
    <div class='block1'>

        <div class='block3'>
            <p>text1</p>
            <p>text2</p>
        </div>

        <div class='block2'>block2</DIV>

    </div>

    </body>
    </html>
1
  • I don't think I can wrap it in block3 :-(
    – Radek
    May 16, 2010 at 2:42
0

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

enter image description here

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%);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.