Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Please refer to this handy diagram I drew:

enter image description here

div1's height is unknown. div3's width is fluid; it should never overlap div2. Both div1 and div2 have the same width and are horizontally centered via margin: auto. How can I position div3 so that it aligns to the right side of body (no matter how wide body is) while sharing vertical position with div2? (Using CSS)

like image 996
sbichenko Avatar asked Oct 04 '12 14:10

sbichenko


People also ask

How do I align a div to the right side?

Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.

How do you position a div to the right in a div?

To align a div with fixed position on the right side, we set the right CSS property of the div we want to align to the right side. to add a div with the class test . Then in the CSS code, we select the elements with class test , and set the right property on it.

How do you vertically align a div in CSS?

For this to work, you need to have a parent container with the display: table; property, and inside that container you will have the number of columns you want to have centered, with the display: table-cell; (and vertical-align: middle; ) property.


1 Answers

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

like image 73
Gabriele Petrioli Avatar answered Sep 20 '22 02:09

Gabriele Petrioli