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.

Expand|Select|Wrap|Line Numbers

 
<!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>

Jun 14 '10 #1

Subscribe Post Reply

1453

drhowarddrfine

7,435

Expert 4TB

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.

"Transcending CSS" is highly recommended.

Jun 14 '10 #2

alexdarlington

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!

Jun 15 '10 #3

drhowarddrfine

7,435

Expert 4TB

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

Jun 15 '10 #4

by: Not4u | last post by:

Hello, I have a problem with CSS code. I want to have one menu column with a fixed width and a 100% height and the rest of the page for content. ---------------- |.|.|<--100%-->|...

HTML / CSS

Browser Height in IE? NOT document height

by: Kepler | last post by:

How do you get the height of the client browser in IE? Both document.body.clientHeight and document.body.offsetHeight return the height of the document. If the page is long and there's a vertical...

Javascript

width and height styles on <a> tag

by: Clemens Quoss | last post by:

Hello, I just encountered a strange thing when switching the doctype on and off in the following html testpage (with IE 6.0): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"...

HTML / CSS

MSIE spacing woes and DIV width & height minimums

by: S | last post by:

Whew! Thanks for your help on that last post. I actually understand what you wrote. I'm trying not to use these groups as a way to get my code written for me, I really want to understand what...

HTML / CSS

copying the listbox behaviour in "Add/Remove Programs"

by: Dan Bass | last post by:

I'm looking to develop a listbox with in-place editing where as each item is selected, it grows to fit in all the text boxes. When the item is deselected, it shrinks back to its original size. The...

C# / C Sharp

MSIE screen height vs. full height

by: . | last post by:

I have an absolutely-positioned div with a y-repeating background inside a container div of variable height (but taller than the browser screen). I need the child div to expand to fill the entire...

HTML / CSS

height of an element and explorer

by: astrochelonian | last post by:

Hello, all, First time I post, so I beg for everyone's patience. I am writing because I have the following doubt. in the page http://atuin.no-ip.org, you can see a blue-grey bar stretching...

HTML / CSS

onchange behaviour save my data

by: amrhi | last post by:

Hy Guys , Can anybody help me ? I try to make small web database in my unit. Some of fields have on change behaviour to get other data that automatically filled other text field. But when i try to...

PHP

Table-like behaviour with CSS

by: =?ISO-8859-1?Q?Andr=E9_Wagner?= | last post by:

Hello! (please read this message using fixed-font) I'm writting a website with boxes of content. The number of cells in each row might change depending on the browser window size, and the...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

DIV height behaviour

Similar topics