I have a page with a bunch of divs that stretch vertically depending on the content. The problem is that there are background images that need to align just right. I know I can specify a fixed height, but that's not what I want. I need to to expand as needed by the content, bun increments of 10px.

So if the content stretched the div out to 505px height - it would actually extend to 510px or whatever the next 10px increment was... make sense?

As far as I know this isn't possible with CSS, but I'm hoping someone can prove me wrong.


3 answers


Hmm, how about do a paragraph with a line-height of 5 and then add a linebreak (with jQuery or such) each time you need them to increment?

Answered about 8 years ago by Kyle Hotchkiss

If the content in the div is purely textual, then you should be able to achieve this with a simple

line-height: 10px;

Of course it may not hold up under all circumstances. The most foolproof way would be to write a bit of javascript that checks the height of your div. The pseudocode should look something like this

get div-height
if div-height is a multiple of 10
    do nothing
    set div-height to the next greater multiple of 10
Answered about 8 years ago by Joshua Clanton
Sisira 95

I think you are looking for something like following [min-height] .yourDiv { min-height:500px; height:auto !important; height:500px; }

And if you want dynamically increase the div with height of the content + 10px, then it would be easily achievable by jquery. let's give a try.

Answered about 8 years ago by Sisira