Bottom alignment for content doesn't work, Can't figure out why

Question

On a web page content, I try to align the content of 3 modules both on top and bottom.

Using flex, the 3 modules have the same height. The module titles are well top-aligned. But impossible to bottom align the buttons :

#container {
  display: flex;
  align-items: stretch;
 }
 
 .module {
  margin-right: 2em;
  border: 1px solid white;
  flex-basis: 30%;
 }

 <div style="text-align: center;">
   <h1>Title</h1>
   <h2>tagline</h2>
 <div id="container">
      <!-- Module1 -->
      <div class="module" style="background-color: red;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 1</strong></p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div id="mc_embed_signup">
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div>
                        
                     </div>
                    
                      <div><input type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>
      
          </tbody>
        </table>
      </div>
      <!-- Fin module 1, début module 2 -->
      <div class="module" style="background-color: green;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 2</strong></p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" placeholder="email address" /></div>
                        
                     </div>
                    
                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>
       
          </tbody>
        </table>
      </div>
<!-- Fin module 2, début module 3 -->
      <div class="module" style="background-color: yellow;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 3</strong></p>
                <p>lorem ipsum</p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div ><input name="EMAIL" type="email" placeholder="email address" /></div>
                        
                     </div>
                    
                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>
            
          </tbody>
        </table>
      </div>
      <!-- Fin module 3 -->
    </div>
</div>

To achieve this bottom-align, I used a simple table HTML code, as suggested here.

It doesnt work here. What have I done wrong ?

Can you show us the preferred HTML? This is entirely possible without using tables and just flexbox. — Paulie_D, Dec 09 '15 at 12:25
[Methods for Aligning Flex Items](http://stackoverflow.com/a/33856609/3597276) — Michael Benjamin, Dec 09 '15 at 20:15

DavidDomain · Accepted Answer · 2015-12-11T13:39:02.003

I would recommend not to be using a table layout at all here. Since you are using a flex layout you can easily, align your buttons and input fields to the bottom, by setting the module to display:flex as well and using justify-content with space-between.

Update:

To be a bit more specific on why this works, let me try to explain it in detail.
The flex-direction of the .module elements is set to column. I'm using flex-flow here, which combines flex-direction and flex-wrap. This will force the .module-child elements to be laid out from top to bottom.

flex-direction

column

The flex container's main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.

Now setting justify-content to space-between will make sure, that the flex items
(.module-child elements) are evenly distributed along the line. First item on the start line and last item on the end line.

justify-content

space-between

Flex items are evenly distributed along the line. The spacing is done such as the space between two adjacent items is the same. Main-start edge and main-end edge are flushed with respectively first and last flex item edges.

Hope this makes a bit more sense now.

Here the example.

Sorry, but i just had to remove those inline styles. ;-)

.main {
  text-align: center;
}

#container {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.module {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  flex-basis: 30%;
  margin: 0 1em;
  padding: 10px;
  border: 1px solid white;
}

.module:nth-child(1) {
  background-color: red;
}
.module:nth-child(2) {
  background-color: green;
}
.module:nth-child(3) {
  background-color: yellow;
}

.module-child {
  width: 100%;
}

<div class="main">
  <h1>Title</h1>
  <h2>tagline</h2>
  <div id="container">
    <!-- Module1 -->
    <div class="module">
      <div class="module-child">
        <p><strong>Module 1</strong></p>
        <p>lorem ipsum</p>
        <p>lorem ipsum</p>
        <p>lorem ipsum</p>
      </div>
      <div id="mc_embed_signup" class="module-child">
        <form>
          <div>
            <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div>
            <div><input type="submit" value="button" /></div>
          </div>
        </form>
      </div>
    </div>
    <!-- Module2 -->
    <div class="module">
      <div class="module-child">
        <p><strong>Module 2</strong></p>
        <p>lorem ipsum</p>
      </div>
      <div id="mc_embed_signup" class="module-child">
        <form>
          <div>
            <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div>
            <div><input type="submit" value="button" /></div>
          </div>
        </form>
      </div>
    </div>
    <!-- Module3 -->
    <div class="module">
      <div class="module-child">
        <p><strong>Module 3</strong></p>
        <p>lorem ipsum</p>
      </div>
      <div id="mc_embed_signup" class="module-child">
        <form>
          <div>
            <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div>
            <div><input type="submit" value="button" /></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

The trick is really about the .module {align-items: baseline; justify-content: space-between} but I can't figure out why. Would you kindly explain ? — Adrien Lafond, Dec 11 '15 at 09:15
The `align-items` is actually not needed here. I've deleted it and added some more explanation on how this works. The main thing is that `flex-direction` of `.module` is set to `column` and `justify-content` with `space-between` will take care of the rest. Hope it is a bit clearer now. ;-) — DavidDomain, Dec 11 '15 at 13:03
ah THX, so clear now. It's tricky as justify-content usually refers to the horizontal axis. Didn't know the flex-direction set to column would change the main axis and so, the justify-content default behavior :) — Adrien Lafond, Dec 11 '15 at 19:29

score 1 · Answer 2 · answered Dec 09 '15 at 12:29

1

Add this css

  .module table {min-height:100%; height:100%;}

Demo Link http://jsfiddle.net/qhpgk7nw/2/

answered Dec 09 '15 at 12:29

Lalji Tadhani

14,041
3
23
40

score 0 · Answer 3 · answered Dec 09 '15 at 12:25

you can try this one:

<div style="text-align: center;">
    <h1>Title</h1>
      <h2>tagline</h2>
    <div id="container">
      <!-- Module1 -->
      <div class="module" style="background-color: red;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 1</strong></p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div id="mc_embed_signup">
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div>

                     </div>
                    <br/>
                      <div><input type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
      <!-- Fin module 1, début module 2 -->
      <div class="module" style="background-color: green;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 2</strong></p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" placeholder="email address" /></div>

                     </div>
                    <br/>
                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
<!-- Fin module 2, début module 3 -->
      <div class="module" style="background-color: yellow;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 3</strong></p>
                <p>lorem ipsum</p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div ><input name="EMAIL" type="email" placeholder="email address" /></div>

                     </div>
                    <br/>
                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
      <!-- Fin module 3 -->
    </div>
</div>

DEMO HERE

score 0 · Answer 4 · answered Dec 09 '15 at 12:38

try this may help you in your style

<style>
#container 
{
display: flex;
align-items: stretch;
justify-content: center;
}

.module 
{
margin-right: 2em;
border: 1px solid white;
flex-basis: 30%;
display: flex;
align-items: center;
justify-content: center;
}
.module tr:nth-child(2) 
{
height: 7em;
}
.module tr:nth-child(1)
{
align-self: flex-start;
}
.module tr:nth-child(3)
{
align-self: flex-end;
}
</style>

in your html

<div style="text-align: center;">
    <h1>Title</h1>
      <h2>tagline</h2>
    <div id="container">
      <!-- Module1 -->
      <div class="module" style="background-color: red;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 1</strong></p>

              </td>
            </tr>
            <tr>
            <td><p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
            </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div id="mc_embed_signup">
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div>

                     </div>

                      <div><input type="submit" value="button" /></div>

                  </form>
                   </div>
                </td>
             </tr>
               </tbody>
          </table>
      </div>
      <!-- Fin module 1, début module 2 -->
      <div class="module" style="background-color: green;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 2</strong></p>
              </td>
            </tr>
                    <tr>
            <td>
            </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" placeholder="email address" /></div>

                     </div>

                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>

              </td>
            </tr>

          </tbody>
        </table>
      </div>
<!-- Fin module 2, début module 3 -->
      <div class="module" style="background-color: yellow;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 3</strong></p>

              </td>
            </tr>
                    <tr>
            <td> <p>lorem ipsum</p>
            </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div ><input name="EMAIL" type="email" placeholder="email address" /></div>

                     </div>

                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>

              </td>
            </tr>

          </tbody>
        </table>
      </div>
      <!-- Fin module 3 -->
    </div>
</div>

Bottom alignment for content doesn't work, Can't figure out why

4 Answers4