View Full Version : div with line height = to div height only displays 1st line of txt correctly

07-27-2011, 07:10 PM
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


07-27-2011, 07:17 PM
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.

07-27-2011, 09:07 PM
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!