Odd Behavour on Float Right on Chrome
I am having a weird problem only in Chrome that adds extra space on top of the element with float: right
, only when resized (notice how the name appears below the title)
Only when resizing desktop media query feedback did I run into this issue.
My HTML looks like this:
<header role="banner">
<a class = "logo"...>...</a> <!-- inline-block -->
<div class = "client">...</div> <!-- float: right -->
<nav role = "navigation">...</nav> <!-- display: inline-block -->
</header>
See the name "Michael"? It appears on the right, correctly positioned in the main navigation. But as soon as the browser changes, at the end it moves to the bottom.
Any idea what is causing this and how can I fix it? I have verified that this happens with the latest version of Chrome on Windows and Mac.
source to share
Switch positions between "client" and "navigation" as follows:
<header role="banner">
<a class = "logo"...>...</a> <!-- inline-block -->
<nav role = "navigation">...</nav> <!-- display: inline-block -->
<div class = "client">...</div> <!-- float: right -->
</header>
The problem is the navigation menu was floating around your "client" container. Items after the floated element will flow around it when they are closed.
source to share