Grow your CSS skills. Land your dream job.

Question About Height Property

  • # May 14, 2012 at 5:44 pm

    I’m not too sure this has to do with the height property or not, but I would assume it does unless some other property should be used instead. On this page, for example:

    http://www.nintendonerds.com/?&p=5

    …for the article called “Pokémon AR Searcher Announced,” I have tags underneath the truncated intro text. The tags are titled “Iwata,” “Pokédex,” “Pokémon White 2,” etc. The last tag, titled “Nintendo Direct” is overlapping

    div class="fp_art_box_container ipsPad"

    I could set the height of the above div to a fixed height, say, 215px but that would set all of the divs on that page, to that height. That’s not what I need. I need the div to adjust to the correct hight only when the article has too many tags.

    Any help is greatly appreciated. I’ve tried a bunch of different things and I just can’t figure this out.

    # May 15, 2012 at 1:43 am

    take the float off .ipsTag_cust, and instead wrap the tags in a div and float THAT, give it a width so that it does not run into the read more button.

    *you will also need to clear your floats if you want the parent container to grow/expand with the content.*

    The :after pseudo selector is good for clearing content, but IE7 support is lacking.
    Instead you can insert a blank div AFTER the tags and BEFORE the tags div closes and put this css on it:


    .myclearingdiv {clear: both;}
    # May 16, 2012 at 8:21 pm

    Thanks for the quick reply; sorry about my delay.

    OK, it seems as though I’m on the right track but can’t seem to float the tags to the right.

    My Site (look at the last article)

    # May 16, 2012 at 8:39 pm

    UPDATE:

    I’ve managed to get everything correct, it seems, except for the auto height once the tags break to a new line.

    # May 16, 2012 at 9:31 pm

    add overflow: hidden; to .ipsPad

    # May 16, 2012 at 9:36 pm

    That seems to have done the trick! Thanks, everyone!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".