<p> within <div>

Hey,

I am trying to learn the exact behavior of CSS and was just placing a
couple of <div>'s after each other.
Each of the <div> has a <p> within and some text within the <p>
Now when I add a background-color to the div, the color won't fill up
the entire space I believe it should. The div only has color around the
text though it has one line space to the above element. I hope it is
clear what I mean:

#navigation {background-color:#009933;}
#web_intro { background-color:#CC9933;}

<div id="navigation"><p>Home | Gigs | Audio | Community</p></div>
<div id="web_intro"><p>Again we've had a totally insane show last
night. Check the video here or get some audio pieces here</p></div>

I am wondering why this behavior happens (at least in FF 1.5 and Safari
2.0.4) - it seems that the <p> overlays the <div> even though its a
child element.
Any advice would be apprechiated.

Best regards,

Nikolai

On 2006-10-14, Nikolai Onken <nikolai.onken (AT) gmail (DOT) com> wrote:

Hey,

I am trying to learn the exact behavior of CSS and was just placing a
couple of <div>'s after each other.
Each of the <div> has a <p> within and some text within the <p
Now when I add a background-color to the div, the color won't fill up
the entire space I believe it should. The div only has color around the
text though it has one line space to the above element. I hope it is
clear what I mean:

#navigation {background-color:#009933;}
#web_intro { background-color:#CC9933;}

div id="navigation"><p>Home | Gigs | Audio | Community</p></div
div id="web_intro"><p>Again we've had a totally insane show last
night. Check the video here or get some audio pieces here</p></div

I am wondering why this behavior happens (at least in FF 1.5 and Safari
2.0.4) - it seems that the <p> overlays the <div> even though its a
child element.
Any advice would be apprechiated.

The spaces you're seeing are the top and bottom margins on the <p>
element in the default stylesheet.

It's because of margin collapsing that the margins end up outside the
boxes that you've given background colours to.

The <p>s' top and bottom margins count as "adjoining" the <div>'s top
and bottom margins, since there's no border or padding in the way, and
so therefore they are combined with them.

This is explained in section 8.3.1 of the CSS 2.1 spec.

If you add "padding: 1px 0px;" to your selectors for #navigation and
#web_intro, the <p>s' margins will be enclosed inside the green and
brown areas and you'll see the effect you want (plus the extra four
pixels...)

Nikolai Onken wrote :

#navigation {background-color:#009933;}
#web_intro { background-color:#CC9933;}

div id="navigation"><p>Home | Gigs | Audio | Community</p></div
div id="web_intro"><p>Again we've had a totally insane show last
night. Check the video here or get some audio pieces here</p></div

A <div> is only supposed to be used to group related elements together.
What you do just increase the DOM tree unneedlessly.

<p id="IntraSiteNavigation">Home | Gigs | Audio | Community</p>

<!-- Sometimes, also called breadcrumbs navigation-->

<p id="web_intro">Again we've had a totally insane show last
night. Check the video here or get some audio pieces here</p>

"Superfluous elements and classes
When starting out with CSS, it's common to make the mistake of using
unnecessary XHTML elements, superfluous classes, and extra <div>
elements. This doesn't necessarily mean that the code will be invalid,
but it counteracts one of the reasons of separating structure from
presentation; to get simpler, cleaner markup."

Best CSS practices
http://www.456bereastreet.com/lab/de...dards/css/#css

See also:
Web Page Development: Best Practices
Tagitis
http://developer.apple.com/internet/...estwebdev.html

Gérard
--
remove blah to email me