jsFiddle
HTML
<div id="a">
<div id="b">bbb</div>
<div id="c">ccc</div>
</div>
CSS
#a {
border: 1px solid black;
*zoom: 1;
}
#a:before, #a:after {
display: table;
content: "";
line-height: 0;
}
#a:after {
clear: both;
}
#b {
float: left;
font-size: 36px;
background-color: blue;
}
#c {
float: right;
background-color: red;
}
I want the red box (#c
) to be aligned to the bottom-right corner.
If I add position:relative
to #a
and position:absolute;bottom:0;right:0
to #c
it works, but as soon as I add it the blue box as well the container (#a
) collapses. I don't know which is going to be taller, #b
or #c
so I want to apply the positioning to both of them. The usual clear-fix doesn't work on absolutely positioned elements.
So how do I position #b
to the bottom-left, and #c
to the bottom-right without collapsing the container div #a
?
Use the text-align property to align the inner content of the block element. Use the bottom and left properties. The bottom property specifies the bottom position of an element along with the position property. The left property specifies the left position of an element along with the position property.
align items to the left or right make sure that you include the entire d-flex align-items-end flex-column on the parent element and choose start or end depending if you want it to be aligned left or right. align item to the bottom Then, use mt-auto on the div that you want to stick to the bottom of the parent.
In the Format Text Box dialog box, click the Text Box tab. In the Vertical alignment box, select Top, Middle, or Bottom. Click OK.
If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
Well, this is pretty esoteric solution, but it works :)
Setting both #b and #c inline-block
so they work with each other like regular inlines and we can use vertical-align
. Then adding text-align:justify;
to container and :after
with width:100%
to pull #b and #c to the left and right sides. Setting font to zero for container (and restore it in inner blocks) to avoid under/over-line and other gaps and set zero font to :after.
#a {
border: 1px solid black;
text-align:justify;
font-size:0;
line-height:0;
}
#a:after {
content:"";
display:inline-block;
width:100%;
}
#b, #c {
display:inline-block;
}
#b {
vertical-align:top;
}
#c {
vertical-align:bottom;
}
font-size:0;
looks not working in IE, so we need little workaround with 1px negative margin:
/* ie fix */
#a {
font:1px/0 sans-serif;
}
#b, #c {
margin:0 0 -1px;
}
Fiddle: http://jsfiddle.net/gv4qd/35/
This should do it i believe
position: absolute;
top: auto;
bottom: 0px;
Unable to test it at the moment but will test later, just use the css on the div you wish to align at the bottom
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