CODEWITHSUNDEEP
htmlcss
Adrien Lafond
Adrien Lafond

Reputation: 63

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

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 ?

Upvotes: 1

Views: 75

Answers (4)

DavidDomain
DavidDomain

Reputation: 15293

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>

Upvotes: 3

Anubhav pun
Anubhav pun

Reputation: 1323

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>

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Add this css

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

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

Upvotes: 1

Ivin Raj
Ivin Raj

Reputation: 3429

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

Upvotes: 0

Related Questions