DIV height behaviour

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • alexdarlington
    New Member
    • Jun 2010
    • 2

    DIV height behaviour

    Hi,
    I am a bit confused about the height behaviour of DIV elements. In particular, if I give a div a border it will include the padding of anything inside it when deciding the height. If I use no border the padding is not included in the height. This is very obvious if you color the background of the div.

    Is this the correct behaviour? Can someone point me to where it is described on w3? Also any recommendations for books that really cover css well would be appreciated.

    Many thanks,
    Alex.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    .div1
    {
      background: blue;
      width: 200px;
    }
    
    .div2
    {
      background: blue;
      width: 200px;
      border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <div class="div1">
    <p>Hello</p>
    </div>
    <div class="div2">
    <p>World</p>
    </div>
    </body>
    </html>
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    This may be what you need as well as this. In the first link, pay attention to collapsing margins. height and width have nothing to do with margin/padding and is the height/width of the content only.

    The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.
    "Transcendi ng CSS" is highly recommended.

    Comment

    • alexdarlington
      New Member
      • Jun 2010
      • 2

      #3
      Thanks for the reply. At the moment I still find that css doesn't behave how I expect it to very often. Unfortunately there is no substitute for a good knowledge!

      Comment

      • drhowarddrfine
        Recognized Expert Expert
        • Sep 2006
        • 7434

        #4
        Make sure you are using a modern browser. Do not trust any version of IE to do anything right.

        Comment

        Working...