CODEWITHSUNDEEP
htmlcss
Andreas V
Andreas V

Reputation: 57

Why isn't the text inside the div?

I just began to play around with HTML/CSS and I'm already stuck.

I tried to google my problem but I think I'm missing some keywords to find a solution. Why isn't the Link and Text inside <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>

Upvotes: 0

Views: 417

Answers (3)

kasunb
kasunb

Reputation: 157

There are few ways to solve your problem.

  • Add a suitable height to #NavContent element (like height:200px)

    Or

  • set overflow property of #NavContent to auto

Upvotes: 0

Fabiano Araujo
Fabiano Araujo

Reputation: 932

Once you set elements inside a div as float, they lost their influence on height attribute on parent element.

That said, you can:

  • Set a height for the div; or
  • Add a empty <div> after <div id="text"> but not inside, with style='clear: both;'

Upvotes: 1

Felix A J
Felix A J

Reputation: 6470

Easy fix is to add overflow: hidden; to #NavContent.

Or you can add the clearfix solution - 

#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>
	<div id="NavContent">
		<a id="Link" href="/">Link
		</a>
		<div id="Text">
					Text
		</div>
	</div>
</nav>

<main>
</main>

<footer>
</footer>

Upvotes: 0

Related Questions