Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

    div with line height = to div height only displays 1st line of txt correctly

    I have a div this is 690 x 300. it is floated left inside a wrapper div. line height is set to 300 ( to make text vertical center ). Text align is also center. I need 2 lines of text but when i try to add 2nd line of text, it drops down soooo many rows. is there a way to get rid of all of those extra rows of spacing? I want the 2nd row of text to be just below the first line like a normal block of text would. this is my current css for that div:

    Code:
    .box {
    background-color: #FFF;
    text-align: center;
    height: 300px;
    width: 690px;
    float: left;
    line-height: 300px;
    }
    Any help would be great

    Thanks

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    when you use line-height you are making each line 300px;
    ----



    Here's one line. = 300px high



    ----



    Here's another line



    ----

    try using padding on the 1st line of text instead. sometimes the best solution is the most simple. Line height is ideal for one line of text, like in a navigation bar.
    Last edited by Sammy12; 07-27-2011 at 06:21 PM.

  • Users who have thanked Sammy12 for this post:

    gribbs100 (07-27-2011)

  • #3
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    thank you very much for that. I understand now. I assumed that the line height represents all content added. I wasn't aware that it is applied to each thing. I will use padding like you have suggested

    Thanks so much!


  •  

    Tags for this Thread

    Posting Permissions

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