ブロックの要素はブロックの親の外側で解析されます

Question

私は単純な小さな銘板のページを作成しています。複数の段落を非表示にし、javascriptで表示して1つのドキュメント内のすべてのセクションを取得しています。ここで は私の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> 

マイ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; 
} 

そして、私の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'; 
} 

、私はそれが通過するためのコードをたくさん知っているが、それはかなりですシンプルなものだと思います。

#about pがアクティブでなく、表示：なし（つまり、別のセクションがアクティブで表示可能）であっても、画像と「Aboutのプレースホルダテキスト」を含むdivが両方表示されます。

​​3210

なぜ2つのdivが親要素の外に移動するのですか？どのように私はそれらを親と一緒に消えることができますか？

Answer 1

<p>要素では、<div>のようなブロックレベルの要素は許可されません。 HTMLパーサが<div>タグを見ると、</p>タグが省略されているとみなされ（オプション）、p要素が完成しているとみなされます。したがって、divエレメントで見られるDOMは、pエレメントの兄弟に従っているとみなされます。

ヒント：SOに質問を投稿する前に、HTMLを検証することをお勧めします。あなたがそうしたら、バリデーターはあなたにエラーを示していたでしょう。