Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts

    CSS & <div> height

    I am relatively new to web design, and have been taking my time learning, and was pretty surprised to read this statement in another forum:

    "Height is determined by content and should not be explicitly expressed in CSS."

    I was really taken back by this statement. I thought my knowledge of (at least) a couple of the basics was rather solid. Is this statement fundamental, or more of the author's opinion?

    This could very well be an "a-ha!" moment for me .....

  • #2
    New Coder
    Join Date
    Oct 2010
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts
    For clarity sake, my <body> has neither height or width assigned through its CSS, however my <wrapper> and every other <div> contained in wrapper I had assigned height to. Is this just wrong, or ill-advised?

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello justaguynpc,
    The normal behavior of a div element is to enclose it's contents. A width is a typical setting that you would put on an element, just to have control over how and where it displays.

    A height is rarely needed though. When you start specifying heights on elements you limit how that element contains it's content. If, for example, your 400px tall container holds 4 paragraphs at 12px text size, what happens to your layout when the person viewing your site on the other end has his browser set to display text at 16px?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    justaguynpc (04-12-2011)

  • #4
    New Coder
    Join Date
    Oct 2010
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks for your reply, I am just so shocked at never having read this somewhere before. Here I am working away and not thinking that I was doing anything different than what everyone has to do, i.e. continuing to "adjust" / "tweak" the height of my <div>s to get the appearance just "right", naturally addressing each <div> that falls below it.

    Jeez! Talk about humbling .....

    Cheers

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by justaguynpc View Post
    For clarity sake, my <body> has neither height or width assigned through its CSS, however my <wrapper> and every other <div> contained in wrapper I had assigned height to. Is this just wrong, or ill-advised?
    If you need to set a height on an element for some reason that's fine, but you will most probably also have to cater for the situation where the content of that container might not all fit in the set height. One option in that case is to set the overflow css style to auto which will add scroll bars to the element when the content "overflows" the height of the element.

  • Users who have thanked bullant for this post:

    justaguynpc (04-13-2011)

  • #6
    New Coder
    Join Date
    Oct 2010
    Posts
    14
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks bullant.

    I'll make a note of that for future reference. Appreciate the information, I'm always open to learning new techniques.

    Cheers

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •