Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member slyder's Avatar
    Join Date
    Aug 2005
    Location
    Austin, TX
    Posts
    144
    Member #
    11053
    I hope I can explain this question clearly enough.

    I'm working on the main headline for my blog, and as such, it will be dynamic; some headlines will be maybe 1 line long (shorter headlines) and some will be two or even three lines long.

    What I was looking to do, was to have the containing box with the headline in it, stay the same size (same height) no matter how many lines the headline takes up. So if the blog post headline is only one line long, I want it 20px off the bottom of the containing box, if it's two lines long, I also want the bottom line 20px off the bottom of the containing box. In other words, when the headline is one line long, it will be 20px off the bottom. If two lines long, the first line moves upward, and the second line is 20px off the bottom, and so on.

    (crude graphical representation below)

    Is this even possible?
    If not, I have another solution, but it wouldn't be the most ideal.

    Can I do it all with CSS?

    Heres my crude graphical representation:



    Code:
     -------------------------
    |                         |
    |                         |
    |                         |
    |                         |
    |                         |
    |                         |  < box 300px tall
    |One line headline        |
     -------------------------
    
     -------------------------
    |                         |
    |                         |
    |                         |
    |                         |
    |                         |
    |This headline is 2       |  < box 300px tall
    |lines long               |
     -------------------------
    
    
     -------------------------
    |                         |
    |                         |
    |                         |
    |                         |
    |This really long         |  < box 300px tall
    |headline is three        |
    |lines long               |
     -------------------------
    http://christopher-scott.org - Ramblings of an amateur web designer
    http://childfreechoice.com - An online community for the positively childfree

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    It's called vertical alignment, and it's done in CSS with the valign property.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  4. #3
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    Can't you just set the height of the div to 300px, and then use the valign property like Steax said.
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Actually, vertical-align doesn't operate on anything other than table cells most of the time. If you set an absolute height on the div, you can use a trick where you give the div a negative margin equal to half of its height to center it vertically. The easiest way, however, would be to have two elements. A containing element that has the absolute height of 300px, and then an element to contain the actual text. The containing element will also be [minicode]position: relative;[/minicode], while the element with the text in it will be [minicode]position: absolute;[/minicode] with [minicode]bottom: 20px;[/minicode] set on it. I believe that should achieve what you're looking for.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:34 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com