SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: align bottom

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    align bottom

    Hello,

    Code:
    <div class="test">
              <p>
                  blah
              </p>
              <p class="bottom">
              		<img src="source.png">
              </p>
    			
    </div>
    I'd like the p.bottom to always sit at the bottom of the div. Here's what I'm trying:

    Code:
    .test {
    	min-height: 200px;
            float: left;
    	}
    .bottom {
    	vertical-align: bottom;
    	}
    But it doesn't work...

    Can someone help me with that problem?


  2. #2
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using vertical-align on block level elements (like <p>) is problematic. More about that here: http://css-tricks.com/what-is-vertical-align/

    Within there is a link about aligning block level elements within block level elements to baseline.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could just set the image itself to vertal-align: bottom instead:

    Code:
    .bottom img {
      vertical-align: bottom;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •