treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Question About Height Property

  • 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.
  • 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;}
  • 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)
  • UPDATE:

    I've managed to get everything correct, it seems, except for the auto height once the tags break to a new line.
  • add overflow: hidden; to .ipsPad
  • That seems to have done the trick! Thanks, everyone!