Please refer to this handy diagram I drew:
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)
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.
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.
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.
.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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With