i have a div tag with height:40px and with a picture as background . i want to put a text at bottom of this div. if i use padding-top in Firefox it add the padding value to height. how can i do it?

3 answers

danwellman 5600
0
points

Just reduce the height.

If the div is 40px high, and you add 30px of padding, change the height to 10px...

Answered about 6 years ago by danwellman
0
points

Margins work on the outside of your div, while padding is added to the inside. When you add a padding to the top it adds the number of pixels that you added onto the height. Just subtract that from the height and it should work properly.

Example:

div.className { height:40px; }

-- I want to add 20 px of padding to the top of this div. That would make it:

div.className { height:20px; padding-top:20px; }

Answered about 6 years ago by Jared Tomeck
0
points

bottom:0; would only work if the "p" styles for that div were set to absolute, and the div was set to relative.

div.className { height:40px; position:relative; }

div.className p { postition:absolute; bottom:0; }

This is a good solution, unless you want to have other text elsewhere in the div that uses < p > tags. If that's the case, it will probably overlap the text that is set to absolute (if the text is more than 1 line). If that happens you'll have to play with the height and padding of the div anyway to get the desired effect.

Answered about 6 years ago by Jared Tomeck