Почему не текст внутри div?

Я только начал играть с HTML/CSS, и я уже застрял.Почему не текст внутри div?

Я попытался решить мою проблему, но, думаю, мне не хватает некоторых ключевых слов, чтобы найти решение. Почему нет ссылки и текста внутри <div id="NavContent>?

DEMO

body { 
 
    margin:0; 
 
    background-color: #ffffff; 
 
} 
 

 
nav { 
 
    background-color: #2a9dfc; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    padding-top: 13px; 
 
    padding-bottom: 13px; 
 
} 
 

 
#NavContent { 
 
    border: 2px solid black; 
 
    max-width: 900px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
#Link { 
 
    float:left; 
 
} 
 

 
#Text { 
 
    float:right; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>scrare</title> 
 
    <link rel="stylesheet" href="stylesheet.css"> 
 
</head> 
 

 
<body> 
 
    <nav> 
 
     <div id="NavContent"> 
 
      <a id="Link" href="/">Link</a> 
 
      <div id="Text">Text</div> 
 
     </div> 
 
    </nav> 
 
</body> 
 
</html>

источник

2015-07-12 Andreas V

Easy исправление добавить overflow: hidden; в #NavContent.

Или вы можете добавить clearfix решение -

#NavContent:after { 
    content: ""; 
    display: block; 
    clear: both; 
}

body { 
 
margin:0; 
 
background-color: #ffffff; 
 
} 
 

 
nav { 
 
background-color: #2a9dfc; 
 
padding-left: 20px; 
 
padding-right: 20px; 
 
padding-top: 13px; 
 
padding-bottom: 13px; 
 
} 
 

 
#NavContent { 
 
border: 2px solid black; 
 
max-width: 900px; 
 
width: 100%; 
 
margin: 0 auto; 
 
} 
 

 
#Link { 
 
float:left; 
 
} 
 

 
#Text { 
 
float:right; 
 
} 
 
#NavContent:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
}

<nav> 
 
\t <div id="NavContent"> 
 
\t \t <a id="Link" href="/">Link 
 
\t \t </a> 
 
\t \t <div id="Text"> 
 
\t \t \t \t \t Text 
 
\t \t </div> 
 
\t </div> 
 
</nav> 
 

 
<main> 
 
</main> 
 

 
<footer> 
 
</footer>

источник

2015-07-12 19:22:18