Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS height adjustable

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #149663
    daniele_mkt
    Participant

    i need to make a height adjustable div where if there’s a minimum content inside it gives a margin from the top so the content stay centered.

    #149681
    jurotek
    Participant

    I don’t get it what you asking for. DIV height automatically grows or shrinks based on the content within. If you want vertically centered content inside the DIV, that DIV has to have a defined height with display table-cell and vertical align middle. Can you put something on Codepen so we can see what it is you want to accomplish?

    #149748
    georgearnall
    Participant

    Not anymore! Thanks to CSS Transforms this has become easier. CodePen

    #149757
    jurotek
    Participant

    It won’t work in ie8 tho, and I could be wrong on this one, but I think it requires ms prefix for this to work in ie9?

    #149761
    georgearnall
    Participant

    This is a problem that will be ironed out with time but it is a CSS solution. I am sure we could write a Javascript polyfill for this. IE9 does require a prefix. I was using prefix free just because I hate dealing with that stuff when doing demos ect.

    #149762
    Alen
    Participant

    Adding JS to solve CSS issue. Something doesn’t smell right.

    #149764
    georgearnall
    Participant

    As far as i know, there is no other way of vertically aligning an unknown height element so JS is the only option.

    If there was something better it most likely will have already been mentioned.

    @Alen I agree in an ideal situation we would want a pure CSS method. But we don’t have one and this is the best we can do.

    #149766
    Paulie_D
    Member
    #149852
    Jozsef K.
    Participant

    If IE7 is not in target, then you could use this:

    div { position: absolute; top: 0; bottom: 0; }
    For IE7 you can try: div { display: inline; zoom: 1; vertical-align: middle }
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.