I need two DIV to be put side by side and aligned vertically at their bottom.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
The easiest way to do this and keep the fluid content in the orange div would be to put both of the divs inside a table and use valign bottom to keep both divs at the bottom no matter how big the orange div gets. This can be done with pure css but the table is the easiest way.
The best possible solution to move a div to the bottom is as follows. Basically what you need to do is to set display flex and flex-direction as a column to the parent and add a 'margin-top: auto' to its child which needs to be floated to the bottom of the container Note: I have used bootstrap and its classes.
To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values. The value left indicates the div tag will be made to float on the left and right to float the div tag to the right.
See: http://jsfiddle.net/thirtydot/J9eds/
I've used display: inline-block
combined with vertical-align: bottom
.
HTML:
<div id="container"> <div id="left"> left<br />left<br />left<br />left<br />left<br />left<br /> leftleftleftleftleftleft </div> <div id="right"></div> </div>
CSS:
#container { border: 1px solid red; float: left; } #left, #right { border: 2px solid red; background: #ccc; vertical-align: bottom; display: inline-block; /* ie6/7 */ *display: inline; zoom: 1; } #right { margin: 20px 20px 0 20px; padding: 20px; width: 100px; }
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