HTML CSS将div的中间水平对齐到另一个div一侧

Question

I'm trying to achieve the following result:
horizontally, the middle of div 2 is aligned with the right side of div 1

_______________________________________
|div 1 _________|_______
| |div 2 | |
| | | |
| |_________|_______|
|______________________________________|

the width of the divs will be set based on other constraints, but, regardless of their sizes, I would like them to stay in this configuration.

I would like a pure CSS3 solution (no javascript resizing...)

Please note that this question is NOT about vertical alignment.

Please let me know if you have a solution.

Thank you.

Answer 1

With 'position' property is an option. I'm not sure if this can be a possible solution to your problem:

Example

div{
    height:400px;
    width:400px;
    background:blue;
    position:relative;
}

div div{
    width:50%;
    height:50%;
    background:skyblue;
    position:absolute;
    left: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

Answer 2

You could use the transform: translate CSS to move the inner element to the correct position when set to left: 100% :

 html, body { width: 100%; height: 100% } div { position: relative; border: 2px solid #f00; overflow: visible; } #div1 { width: 50%; height: 33%; } #div2 { width: 50%; height: 50%; border-color: #0f0; } #div2 { position: absolute; left: 100%; top: 50%; transform: translate(-50%,-50%) } You could use the `transform: translate` to position the inner element when setting the position of the element at `left: 100%`. 

 <div id="div1"> <div id="div2"></div> </div> 

Answer 3

Make div 2 a child of div 1, use absolute positioning and use calc() in your css for the values.

.div1 {
  position: relative;
  border: 1px dashed black;
  width:150px;
  height:50px;
}
.div2 {
  position: absolute;
  right:calc(-50% + 25px);
  top: calc(100% - 75%);
  border: 1px dashed green;
  width:100px;
  height:50%;
}

Here's a jsfiddle