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

[gribbs100]

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:

.box {
background-color: #FFF;
text-align: center;
height: 300px;
width: 690px;
float: left;
line-height: 300px;
}

Any help would be great

Thanks

[Sammy12]

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.

[gribbs100]

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!