Left, center, and right align divs on bottom of same line
Solution 1
By setting your container div to position:relative
and the child divs to position:absolute
you can absolute position the divs within the confines of the container.
This makes it easy, as you can use bottom:0px
to align all vertically to the bottom of the container, and then use left/right styling to position along the horizontal axis.
I set up a working jsFiddle: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ and the code follows:
HTML:
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
CSS:
#container {
position:relative;
height:400px;
width:100%;
border:thick solid black;
}
#container div {
background:grey;
width:200px;
}
#left {
position:absolute;
left:0px;
bottom:0px;
}
#center {
position:absolute;
left:50%;
margin-left:-100px;
bottom:0px;
}
#right {
position:absolute;
right:0px;
bottom:0px;
}
Note: For the "center" div, the margin-left = 1/2 the width of the div :)
Hope that helps :)
Solution 2
My technique is similar to @Damien-at-SF:
I tried to rigorously demonstrate all the requirements you asked for.
HTML:
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
CSS:
#container {
position: relative;
height: 400px;
width: 80%;
min-width: 400px;
margin: 0 auto;
background: #ccc
}
#left, #right, #mid {
position: absolute;
bottom: 0;
}
#left {
left: 0;
width: 80px;
height: 200px;
background: red
}
#right {
right: 0;
width: 120px;
height: 170px;
background: blue
}
#mid {
left:50%;
margin-left: -80px;
width: 160px;
height: 300px;
background: #f39
}
Solution 3
To make your center div elastic, you could do something like:
<div style="display:table; width:500px;">
<div style="display:table-row;">
<div style="display:table-cell; width:50px;"></div>
<div style="display:table-cell;"></div>
<div style="display:table-cell; width:50px;"></div>
</div>
</div>
Solution 4
A further enhancement to the first answer:
In the "center" div CSS, you need to add:
text-align:center;
In the "right" div CSS, you need to add:
text-align:right;
... to perfectly achieve left/center/right aligning.
jrdioko
Updated on July 09, 2022Comments
-
jrdioko almost 2 years
I have three divs that I would like to display on the same line. Each of the three has different widths and heights, and they are not straight text. I'd like to left-align one (all the way to the left), right-align another (all the way to the right), and center the third (in the middle of the containing div, the whole page in this case).
In addition, I'd like the three divs to be vertically aligned to the bottom of the containing div. The solution I have vertically aligns them to the top of the containing div.
What is the best way to handle this?
-
thirtydot about 13 years+1, if only because you posted the "same idea" as me, but faster.
-
PUG over 11 yearswhat if the center div's width is unknown or is dynamic?
-
PUG over 11 yearswhat if container has a background which I want to display too? Doing above will result in container have no height
-
John about 9 yearsAgain another example of NOT comprehending CSS; this question has nothing to do with
position
. Do it right or don't do it at all.