#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171

    Css problem with dynamic height


    Hi;

    I made this page but when I resize to for example 1100 px width, the boxes loose the design and everything breaks.

    Of course I can fix that by giving a fixed height to <p> for description but that way when the screen goes smaller than ~1000px it creates a gap between each box.

    Can someone please help?

    Thank you.
    Attached Images
    Last edited by zxcvbnm; August 13th, 2013 at 01:27 AM.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0
    The title of your post says you have a problem with dynamic height, but the body suggests it is a problem with dynamic width... I'm not sure i entirely understand the problem.
  4. #3
  5. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Hi mbrown3391

    I am not sure if you checked it out or not, it is both width and height.

    Width of the screen and height of the boxes.

    Thank you
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0
    i see the width problem, but dont see any height problem
  8. #5
  9. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Originally Posted by mbrown3391
    i see the width problem, but dont see any height problem
    What do you mean by width problem?

    Thank you
  10. #6
  11. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Hi;

    Can anyone give me some help here.

    Thanks
  12. #7
  13. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Come on poeple this used to be a very acive CSS forum!


    1- Click here,
    2 - Manually resize screen,
    3 - Scroll down,
    4 - See the mess.
    5 - Tell me what to do.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    People come and go over the years. I miss seeing kk5st and BonRouge (among others) around here.

    There's no guarantee that posting on most Internet message boards will result in someone else providing an answer to the question. You don't help yourself by not following all of the guidelines. Even if you were to hire me, I would require that most errors in the code be corrected.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Originally Posted by Kravvitz
    People come and go over the years. I miss seeing kk5st and BonRouge (among others) around here.

    There's no guarantee that posting on most Internet message boards will result in someone else providing an answer to the question. You don't help yourself by not following all of the guidelines. Even if you were to hire me, I would require that most errors in the code be corrected.
    Uncle Kravviz;
    Thanks for the link.

    This is not a basic obvious css issue. I highly doubt if the answer is in the link you sent.
    Thats why I posted
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Yes, it's an intermediate skill-level issue and it does not look like the HTML errors are contributing to it.

    Unfortunately, it is difficult to find relevant results for searches on this issue. So many of the results are about equal height columns or making a parent element expand to contain floated children. Due to that, I'll tell you my recommended solution. Here is the better of the two relevant results I eventually found. In short, the best solution is to use "display:inline-block" instead of the "float" property. However, due to incomplete support of "inline-blocks" in older IE and Mozilla browsers, it's not quite as simple as that. I recommend you read these:
    http://www.search-this.com/2008/08/2...ck-in-a-block/
    http://gtwebdev.com/workshop/layout/...ck-gallery.php
    http://hanamidesign.com/blog/display...ser-solutions/
    http://blog.mozilla.com/webdev/2009/...-inline-block/
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  20. #11
  21. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Originally Posted by Kravvitz
    Yes, it's an intermediate skill-level issue and it does not look like the HTML errors are contributing to it.

    Unfortunately, it is difficult to find relevant results for searches on this issue. So many of the results are about equal height columns or making a parent element expand to contain floated children. Due to that, I'll tell you my recommended solution. Here is the better of the two relevant results I eventually found. In short, the best solution is to use "display:inline-block" instead of the "float" property. However, due to incomplete support of "inline-blocks" in older IE and Mozilla browsers, it's not quite as simple as that.
    Hi Kravvitz;

    Thank you for display:inline-block. Fixed that issue but it looks funny
  22. #12
  23. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Two of those five pages clearly mention that issue. You need to set the "vertical-align" property. Its default value is "baseline". You seem to want it set to "top".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  24. #13
  25. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Originally Posted by Kravvitz
    Two of those five pages clearly mention that issue. You need to set the "vertical-align" property. Its default value is "baseline". You seem to want it set to "top".
    Yes exactly

    On the other note, what do you think about giving the boxes fixed height? Would it be a right move?

IMN logo majestic logo threadwatch logo seochat tools logo