Child element loses floating when parent element's position is fixed - html

Question

I am creating a navigation panel that'll stay fixed when scrolling down. Here's the code.
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
<div style="clear: both;"></div>
</header>
And here's the css
header {
position: fixed;
max-width:960px;
}
.logo {
float: left;
}
nav {
float: right;
}
I want to have the logo on the right side and the navigation menus on the right side.
Right now, the float seem to work, but the nav elements appear right after the logo instead of being floated to the right edge.
If I remove the position:fixed code from header, the floating seems to work fine.

Answer 1

This would be the solution using flexbox instead of float:
header {
width: 100%;
max-width: 960px;
display: flex;
justify-content: space-between;
}
.logo {
align-self: flex-start;
}
nav {
align-self: flex-end;
}
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
And you will need to remove the clear: both; from the HTMl. Let me know if it works!

Answer 2

As mentioned by #AngelMdez, Flexbox is a better way to go than Floats, position: fixed should work all the same; just keep in mind that you should specify a width so the element itself uses the space you expect.
After that you can remove all the float and clear properties and it should be fine.
body {
margin: 0;
}
header {
position: fixed;
width: 100%;
max-width: 960px;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
background-color: gray;
}
.content {
padding-top: 70px;
}
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
</header>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
Original Example with Floats
header {
position: fixed;
width: 100%;
max-width: 960px;
background-color: lightgray;
height: 60px;
}
.logo {
float: left;
}
nav {
float: right;
}
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
<div style="clear: both;"></div>
</header>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

Answer 3

To answer your question: Most HTML elements have default styling provided by the browser called the User Agent. The <header> has a default display value of display: block;. An element with display: block grows to its maximum width relative to its container.
In this case the container of <header> is the <body> which takes its width from the <html> which takes up the whole viewport.
Because you've set the max-width to 960px the element will grow to only 960px. This works fine, as the width is normally taking up the whole viewport. But as soon as you set an absolute position, in this case `fixed, the element is taken out of the normal document flow. Because it's now sticking to a fixed position. Meaning that it has no parent with a width. So it loses its inherited width by its parent ( the body ).
To solve your problem with the code you've already written, just add a width to the element. Because you've already set a max-width: 960px; you can tell the element to grow to 100% with: width: 100%;. It will stop at 960px because that's its maximum-width:
header {
position: fixed;
width: 100%;
background: blue;
}
a {
color: white;
}
.logo {
float: left;
}
nav {
float: right;
}
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
Menu_1
Menu_2
</nav>
<div style="clear: both;"></div>
</header>