#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Location
    On planet earth
    Posts
    105
    Rep Power
    11

    CSS height element question...


    I am quite new to CSS despite years of trying to make my own website, know a bit about php

    I just have a question about CSS styling, specifically the height element

    Is it wrong to specify a height for a div tag? eg so that the page height stops going up and down?
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    There is nothing wrong with using the height element, that is what it is there for.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Location
    On planet earth
    Posts
    105
    Rep Power
    11
    Originally Posted by simplypixie
    There is nothing wrong with using the height element, that is what it is there for.
    I was told it is best not to use the height element in college, I don't know if this is because it can conflict with things
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    Did they tell you why or when not to use it? Or were they just referring to using it for the body?

    It really does depend if you do need to use it, if not then rely on the content with padding / margins to set the height of the page.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Location
    On planet earth
    Posts
    105
    Rep Power
    11
    Vaguely, because in college we were (other students as well) designing some similar to a retail site that everything should fit???

    Something like that
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    Not quite sure what they were supposed to mean by that but, for example, if you have a header on your page with a background image then you have to set the height of the header area to be as big as the background image in order for it all to display. That is unless the content you put in the header area will stretch the header vertically to show the whole background anyway, but even saying that it is wise to set the height to prevent layout problems due to external influences (change of font size by user for example).

    Sounds to me like your college tutor didn't know much about what they were talking about I am afraid.
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Location
    On planet earth
    Posts
    105
    Rep Power
    11
    OK, thanks
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68

    Ask Why, and then ask why again.


    Is applying height used as a replacement for margin or padding?

    Is applying a height used to for a specific reason where margin and padding will not work?


    example:
    On the new wwwdotdevelopersheddotcom

    There is a white stripe that runs across the page that contains the developer shed "shed". The white stripe is a div that has a height set to 278px and overflow set to visible. This allows the image of the shed to break out of the the white stripe container. Without a set height the shed would sit inside of it.
  16. #9
  17. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    Originally Posted by simplypixie
    Not quite sure what they were supposed to mean by that but, for example, if you have a header on your page with a background image then you have to set the height of the header area to be as big as the background image in order for it all to display. That is unless the content you put in the header area will stretch the header vertically to show the whole background anyway, but even saying that it is wise to set the height to prevent layout problems due to external influences (change of font size by user for example).

    Sounds to me like your college tutor didn't know much about what they were talking about I am afraid.
    Declaring height is not mandatory for your example. You could use margin and padding.
  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
    Welcome to DevShed Forums, cssbonding.

    First off, I should remind you that the correct term is "height property", not "height element".
    Originally Posted by cssbonding
    I was told it is best not to use the height element in college, I don't know if this is because it can conflict with things
    I wouldn't say "conflict", but it is best to avoid setting a height on elements that contain text or have descendants that contain text, so that the elements can expand with the content. Remember that users can and (some) will adjust font-sizes to make pages easier to read for themselves. Flexibility is very important in good web design.

    Originally Posted by simplypixie
    for example, if you have a header on your page with a background image then you have to set the height of the header area to be as big as the background image in order for it all to display.
    That's what "min-height" is for.

    Originally Posted by simplypixie
    Sounds to me like your college tutor didn't know much about what they were talking about I am afraid.
    Sounds to me like you don't know much about what you're talking about. I'm glad that at least one person teaching this in a formal institution knows about that. From the general impression I've gotten, most such instructors don't seem to be aware of many best practices.

    Originally Posted by Paul-Ninja
    Without a set height the shed would sit inside of it.
    It would be better if the image was given a negative bottom margin instead. The "height" property is not the only way to force overflow. Absolute and relative positioning can also be used to that kind of thing.

    Comments on this post

    • cssbonding agrees
    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. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    Originally Posted by Kravvitz
    Sounds to me like you don't know much about what you're talking about. I'm glad that at least one person teaching this in a formal institution knows about that. From the general impression I've gotten, most such instructors don't seem to be aware of many best practices.
    I am not sure why you have to reply negatively to every reply I give on this forum and for your information I do know what I am talking about and have been developing using CSS for many years and am always reading up on developments in the language.

    If I thought the OP wanted to set a min-height, I would have discussed that with them, but it has a completely different result on the div it is applied to than height which the OP did talk about (as you well know if you know what you are talking about)!
  22. #12
  23. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Location
    On planet earth
    Posts
    105
    Rep Power
    11
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, cssbonding.

    First off, I should remind you that the correct term is "height property", not "height element".

    I wouldn't say "conflict", but it is best to avoid setting a height on elements that contain text or have descendants that contain text, so that the elements can expand with the content. Remember that users can and (some) will adjust font-sizes to make pages easier to read for themselves. Flexibility is very important in good web design.
    OK, I think the tutor was meaning the wrapper div. It was two years ago, so maybe I was thinking of something else
  24. #13
  25. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Originally Posted by simplypixie
    I am not sure why you have to reply negatively to every reply I give on this forum and for your information I do know what I am talking about and have been developing using CSS for many years and am always reading up on developments in the language.
    For the record, I'm not targeting you specifically. I just will typically respond to anything I feel is incorrect or misleading. In this case you made a sweeping general statement. I will very frequently disagree with those. CSS has a lot of grey areas, so many questions aren't just "yes" or "no".

    Knowing the technical things and following widely recognized best practices aren't quite the same. Some sites seem to only focus on the former.

    Originally Posted by simplypixie
    If I thought the OP wanted to set a min-height, I would have discussed that with them, but it has a completely different result on the div it is applied to than height which the OP did talk about (as you well know if you know what you are talking about)!
    I was responding to something you said. I did not directly respond to cssbonding's question.
    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).
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    4
    Rep Power
    0
    Mozilla, Netscape, and Opera browsers interpret these values as the exact measurements and don't allow a DIV's HEIGHT or WIDTH values to extend beyond what you specify. So if you set the HEIGHT and WIDTH properties for a DIV and then insert images or text that takes up more space, the display will be a jumbled mess.

    Internet Explorer is much more forgiving. It considers HEIGHT and WIDTH values to be minimum values and expands the DIV to contain all the content you want - just like a table cell.

    Comments on this post

    • rdoyle720 disagrees : This was true of IE in version 6 and below, but no longer.

IMN logo majestic logo threadwatch logo seochat tools logo