CODEWITHSUNDEEP
csshtmlalignmentcentervertical-alignment
jrdioko
jrdioko

Reputation: 33496

Left, center, and right align divs on bottom of same line

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?

Upvotes: 18

Views: 31324

Answers (6)

Penny Liu
Penny Liu

Reputation: 17458

You can use align-items: flex-end to make the flexbox items aligned vertically at the bottom.

.container {
  display: flex;
  height: 300px;
  min-width: 400px;
  background-color: #61a0f8;
  justify-content: space-between;
  align-items: flex-end;
}

.item {
  width: 100px;
  height: 120px;
  background-color: #f08bc3;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}

.flex-2 {
  width: 140px;
  height: 240px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item flex-2">2</div>
  <div class="item">3</div>
</div>

Upvotes: 0

Babiker
Babiker

Reputation: 18798

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>

Upvotes: 2

FoulFoot
FoulFoot

Reputation: 11

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.

Upvotes: 1

thirtydot
thirtydot

Reputation: 228192

My technique is similar to @Damien-at-SF:

I tried to rigorously demonstrate all the requirements you asked for.

Live Demo

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
}

Upvotes: 5

Damien-Wright
Damien-Wright

Reputation: 7554

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 :)

Upvotes: 21

Satya
Satya

Reputation: 4478

Set position: relative on the containing div, set position: relative on your 3 divs, and set the bottom attribute of the 3 divs to 0:

bottom: 0

Upvotes: 0

Related Questions