Question

I am writing a simple little nameplate page and am using multiple paragraphs hidden and shown with javascript to get all the sections in one document.
Here is my html:

<header>
<h1><span>Scott Colby</span></h1>
<nav>
    <div id="twitternav"><a href="javascript:showTwitter()">Twitter</a></div>
    <div id="tumblrnav"><a href="javascript:showTumblr()">Tumblr</a></div>
    <div id="flickrnav"><a href="javascript:showFlickr()">Flickr</a></div>
    <div id="facebooknav"><a href="javascript:showFacebook()">Facebook</a></div>
    <div id="linksnav"><a href="javascript:showLinks()">Links</a></div>
    <div id="aboutnav" class="active"><a href="javascript:showAbout()">About Me</a></div>
</nav>
</header>

<div id="content">
<p id="twitter">
    Placeholder text for Twitter
</p>

<p id="tumblr">
    Placeholder text for Tumblr
</p>

<p id="flickr">
    Placeholder text for Tumblr
</p>

<p id="facebook">
    Placeholder text for Tumblr
</p>

<p id="links">
    Placeholder text for Links
</p>

<p id="about" class="active">
    <div id="portrait"><img src="img/portrait.jpg" width="188" height="221" alt="-----" /><br /><span class="credit">Image: &copy; 2011 Jim Thomas</span></div>
    <div>Placeholder text for About Me</div>
</p>
</div>

My CSS:

nav {
    color: white;
    margin: 0 5px -8px 0;
    text-align: right;
    z-index: 1;
}

nav div{
    display: inline;
    margin: 0 0 0 .9em;
    padding: .25em .25em .25em .25em;
    z-index: 1;
}

nav div:hover {
    background: #F77D00;
}

nav div.active {
    background: #FF9900;
}

#content p {
    display: none;
    font-size: 85%;
    z-index: -1;
}

#content p.active {
    display: block;
}

And my javascript:

    function hideAll() {
    document.getElementById('twitter').className = '';
    document.getElementById('twitternav').className = '';

    document.getElementById('tumblr').className = '';
    document.getElementById('tumblrnav').className = '';

    document.getElementById('flickr').className = '';
    document.getElementById('flickrnav').className = '';

    document.getElementById('facebook').className = '';
    document.getElementById('facebooknav').className = '';

    document.getElementById('links').className = '';
    document.getElementById('linksnav').className = '';

    document.getElementById('about').className = '';
    document.getElementById('aboutnav').className = '';
}

function showTwitter() {
    hideAll();
    document.getElementById('twitter').className = 'active';
    document.getElementById('twitternav').className = 'active';
}
function showTumblr() {
    hideAll();
    document.getElementById('tumblr').className = 'active';
    document.getElementById('tumblrnav').className = 'active';
}

function showFlickr() {
    hideAll();
    document.getElementById('flickr').className = 'active';
    document.getElementById('flickrnav').className = 'active';
}


function showFacebook() {
    hideAll();
    document.getElementById('facebook').className = 'active';
    document.getElementById('facebooknav').className = 'active';
}

function showLinks() {
    hideAll();
    document.getElementById('links').className = 'active';
    document.getElementById('linksnav').className = 'active';
}

function showAbout() {
    hideAll();
    document.getElementById('about').className = 'active';
    document.getElementById('aboutnav').className = 'active';
}

Now, I know that’s a lot of code to go through, but it’s pretty simple stuff I think.

Here is my problem: even when the #about p is not active and has display:none (i.e. another section is active and visible), the image and the div with “Placeholder text for About” are both visible. When I investigated this in firebug, it shows something like this:

<p id="about">  </p>
<div id="portrait"><img .... /></div>
<div>Placeholder text for About</div>

Why do the two div’s migrate outside their parent element? How can I make them disappear along with their parent?

Answer 1

The <p> element does not allow block level elements like <div> inside it. When the HTML parser sees the <div> tag, it assumes that the </p> tag has been omitted (it’s optional) and that the p element is complete. Hence the DOM you see with the div elements as following siblings of the p element.

Tip: It’s always a good idea to validate your HTML before posting a question on SO. Had you done so, the validator would have indicated the error to you.