CODEWITHSUNDEEP
htmlcss
MarMan29
MarMan29

Reputation: 729

Absolute alignment issue

I have the following code:

#main {
       position: relative;
       top:100px;
       left:100px;
       height:200;
       width:600;
       border:solid;
       border-width:1px;
    }
    
    
    .rightContain {
       position:absolute;
       top:0;
       right:0;
       border:solid;
       border-width:1px;
       width:10px;
    
    }
    
    .selector {
       position: relative;
       margin:0;
       padding:0;
       border:solid;
       border-color:blue;
       border-width:1px;
    }
    .selector > p {
       margin:0;
       padding:0;
       line-height:70%;
    }
    
    .selectorBox {
       border:solid;
       border-width:1px;
       width:60px;
       height:60px;
    }
<html>
    <head>
    </head>
    
    <body>
       <div id="main">
          <div class="rightContain">
             <div class="selector">
                   <p>*</p>
                   <p>*</p>
                   <p>*</p>
             </div>
             <div class="selectorBox">
                item 
             </div>
          </div>
       </div>
    </body>
    </html>

I'm trying to get the .selectorBox top right corner to align to the bottom right of the .selector div. Does anyone know how I can achieve this?

enter image description here

Upvotes: 0

Views: 41

Answers (1)

Pedro Estrada
Pedro Estrada

Reputation: 2419

I added position:absolute and right:-1px to the #selectorBox and i believe it achieves the result you're looking for.

The right css can be changed to move the selectorBox to the left or right.

#main {
       position: relative;
       top:100px;
       left:100px;
       height:200px;
       width:600px;
       border:solid;
       border-width:1px;
    }
    
    
    .rightContain {
       position:absolute;
       top:0;
       right:0;
       border:solid;
       border-width:1px;
       width:10px;
    
    }
    
    .selector {
       position: relative;
       margin:0;
       padding:0;
       border:solid;
       border-color:blue;
       border-width:1px;
    }
    .selector > p {
       margin:0;
       padding:0;
       line-height:70%;
    }
    
    .selectorBox {
      position:absolute;
      right:-1px;
       border:solid;
       border-width:1px;
       width:60px;
       height:60px;
    }
<html>
    <head>
    </head>
    
    <body>
       <div id="main">
          <div class="rightContain">
             <div class="selector">
                   <p>*</p>
                   <p>*</p>
                   <p>*</p>
             </div>
             <div class="selectorBox">
                item 
             </div>
          </div>
       </div>
    </body>
    </html>

Upvotes: 2

Related Questions