How to make a div align to the right side of the parent while maintaining its vertical position?

.div1{ margin:0 auto; width:100px; height:50px; border:5px solid #995555; } .div2{ width:100px; margin:0 auto; border:5px solid #aaaa55; height:200px; } .div3{ float:right; width:50px; height:100px; border:5px solid cyan; } <div class=”div1″>div1</div> <div class=”div3″>div3</div> <div class=”div2″>div2</div> Demo also at http://jsfiddle.net/XjC9z/1/

Vertical Alignment of SVG in CSS

jsfiddle 1 – You can use position:relative on the container and position:absolute on the objects like this: position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; right: 0; margin: auto; text-align: center; The top: 50% moves the object to the container’s vertical center picking the top of the object as reference (not … Read more