I am trying to display my navigation bar inside of the orange section and have it float right inside of it. However, it does not work. The nav bar will break out of the orange section when I apply a border to it. And if I apply box-sizing: border-box to try and fix it, it will break the rest of the formatting applied to the left and right div.
Basically, I want to float the nav right and have it displayed inside of the orange header section.
<html>
<head>
<style>
header{
background-color: orange;
height: 100px;
box-sizing: border-box;
border: 3px solid blue;
}
h1{
padding: 10px;
}
#navbar{
float: right;
}
#right {
float: right;
background-color: green;
width: 50%;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
border: 3px solid gray;
}
#left {
float: left;
background-color: blue;
width: 50%;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
border: 3px solid gray;
}
footer{
background-color: yellow;
padding: 5px;
clear: both;
border: 3px solid gray;
}
a:hover{
background-color: #a40000;
text-decoration: none;
}
</style>
</head>
<body>
<header>
<title>Home</title>
<h1>Here is the header</h1>
<div id="navbar">
<nav>
<a href="index.html">Home</a>
<a href="products.html">Products</a>
<a href="aboutus.html">About Us</a>
<a href="contactus.html">Contact Us</a>
</nav>
</div>
</header>
<div id="left"><p>LEFT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at purus nec orci fermentum laoreet ut vitae tellus. Etiam pellentesque eleifend sapien at condimentum. Phasellus eu sollicitudin augue, ut iaculis dolor. Suspendisse faucibus metus ante, nec feugiat erat iaculis eget. Etiam eget laoreet felis. Aenean ut varius metus, sed iaculis quam. Proin aliquam odio at sem efficitur hendrerit nec et elit. Integer euismod leo eu augue convallis, et porttitor neque egestas. Sed a laoreet ipsum, at aliquet augue.</p></div>
<div id="right"><p>RIGHT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at purus nec orci fermentum laoreet ut vitae tellus. Etiam pellentesque eleifend sapien at condimentum. Phasellus eu sollicitudin augue, ut iaculis dolor.</p></div>
<footer><p>Here is the footer</p></footer>
</body>
</html>```
Removing height: 100px and adding overflow: hidden to your header styles will display what you want.
Because you're using float to position your navigation bar on the right, the navigation bar is considered 'out-of-flow' and it won't be contained in the <header> parent like a normal child element. Using overflow: hidden on the parent will force it to contain its children normally.
You'll also need to remove height: 100px because even the <h1> in the <header> already has a height greater than 100px. After you remove the fixed height, the container element will resize to fit its children and you'll be able to see the navigation bar.
<html>
<head>
<style>
header{
background-color: orange;
box-sizing: border-box;
border: 3px solid blue;
overflow: hidden;
}
h1{
padding: 10px;
}
#navbar{
float: right;
}
#right {
float: right;
background-color: green;
width: 50%;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
border: 3px solid gray;
}
#left {
float: left;
background-color: blue;
width: 50%;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
border: 3px solid gray;
}
footer{
background-color: yellow;
padding: 5px;
clear: both;
border: 3px solid gray;
}
a:hover{
background-color: #a40000;
text-decoration: none;
}
</style>
</head>
<body>
<header>
<title>Home</title>
<h1>Here is the header</h1>
<div id="navbar">
<nav>
<a href="index.html">Home</a>
<a href="products.html">Products</a>
<a href="aboutus.html">About Us</a>
<a href="contactus.html">Contact Us</a>
</nav>
</div>
</header>
<div id="left"><p>LEFT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at purus nec orci fermentum laoreet ut vitae tellus. Etiam pellentesque eleifend sapien at condimentum. Phasellus eu sollicitudin augue, ut iaculis dolor. Suspendisse faucibus metus ante, nec feugiat erat iaculis eget. Etiam eget laoreet felis. Aenean ut varius metus, sed iaculis quam. Proin aliquam odio at sem efficitur hendrerit nec et elit. Integer euismod leo eu augue convallis, et porttitor neque egestas. Sed a laoreet ipsum, at aliquet augue.</p></div>
<div id="right"><p>RIGHT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at purus nec orci fermentum laoreet ut vitae tellus. Etiam pellentesque eleifend sapien at condimentum. Phasellus eu sollicitudin augue, ut iaculis dolor.</p></div>
<footer><p>Here is the footer</p></footer>
</body>
</html>