I'm having an issue with a new design I'm working on. Check it out here on CodePen. When I size down the window and bring it back up, the navigation on the right gets all messed up. It only does that in Chrome and Opera, though. Works perfectly fine in IE 11 and FireFox. If I open up inspect element and uncheck and recheck the float:left; checkbox, it corrects the issue. What is causing this problem? I wouldn't be surprised if it was something stupid that I've overlooked.
/*tags*******************************************************/
html,
body {
background-color: #111;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
a {
color: #FFF200;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#headerprofile #pic {
display: inline-block;
height: 56px;
margin-top: 27px;
}
#headerprofile img {
border: 1px solid #ecf0f1;
border-radius: 5px;
max-height: 100%;
}
#headerprofile #profnav {
display: inline-block;
float: left;
margin-right: 32px;
}
#headerprofile #profnav a {
color: #fff;
margin-left: 30px;
}
#headerprofile #profnav a:first-child {
margin-left: 0px;
margin-left: initial;
}
#navigation a {
display: inline-block;
padding: 8px;
color: #ecf0f1;
}
#navigation a:hover {
background-color: rgba(255, 255, 255, 1);
border-radius: 4px;
color: #010107;
text-decoration: none;
}
#navigation ul li {
display: inline;
}
/*IDs********************************************************/
#firstrow {
height: 112px;
position: relative;
}
#headerContainer {
background-color: #180153;
background-color: #c0392b;
padding-bottom: 15px;
padding-top: 15px;
}
#headerprofile {
float: right;
line-height: 112px;
max-height: 100%;
}
#logo {
float: left;
position: relative;
height: 100%;
}
#logo #logovector {
width: 250px;
}
#logo #logovector #logoOutline {
fill: #ecf0f1;
}
#logo #logovector .outlinetext {
fill: #ecf0f1;
}
#navigation {
background-color: #2c3e50;
font-size: 20px;
margin-top: 6px;
text-align: center;
padding-bottom: 20px;
padding-left: 16px;
padding-right: 16px;
padding-top: 5px;
}
/*classes****************************************************/
.columnize {
margin: auto;
width: 80%;
}
.columnize.full {
width: 97%;
width: calc(100% - 50px);
}
.center {
text-align: center;
}
.content {
margin-top: 25px;
line-height: 30px;
}
.displayNone {
display: none;
}
.zigzag {
-webkit-filter: drop-shadow(rgba(255, 255, 255, .3) 0px -3px 0px);
position: relative;
width: 100%;
}
.zigzag:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 20px;
}
.zigzag.first:before {
background: linear-gradient(45deg, transparent 33.333%, #2c3e50 33.333%, #2c3e50 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #2c3e50 33.333%, #2c3e50 66.667%, transparent 66.667%);
background-size: 20px 40px;
}
.zigzag.second:before {
background: linear-gradient(45deg, transparent 33.333%, #111 33.333%, #111 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #111 33.333%, #111 66.667%, transparent 66.667%);
background-size: 20px 40px;
}
@media screen and (max-width: 680px) {
#headerprofile #pic {
/*loat:none;*/
clear: both;
display: block;
text-align: center;
margin-top: 0px;
margin-top: initial;
}
#headerprofile #profnav {
float: none;
clear: both;
display: block;
margin-right: 0px;
margin-right: initial;
text-align: center;
}
#firstrow {
height: auto;
}
#headerprofile {
line-height: 60px;
}
#logo {
float: none;
}
#logo #logovector {
display: block;
margin: auto;
max-width: 385px;
width: 100%;
width: calc(100% - 10px);
}
#headerprofile {
float: none;
}
}
.formContainer h1 {
margin-bottom: 25px;
margin-top: 25px;
}
form input.textinput {
position: relative;
padding: 5px 10px;
margin: 2px;
font-size: 13px;
background-color: #222;
background-color: rgba(0, 0, 0, 0);
font-weight: bold;
border: 2px solid #fff;
border: 2px solid rgba(255, 255, 255, .8);
cursor: pointer;
color: #fff;
-webkit-user-select: none;
}
.login.formContainer form {
background-color: #2c3e50;
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1);
padding: 10px;
width: auto;
}
.login.formContainer form h3 {
margin-bottom: 10px;
}
.login.formContainer form input.textinput {
width: 254px;
width: calc(100% - 30px);
}
.login.formContainer form input#signemail {
width: 151px;
width: calc(100% - 129px);
}
.login.formContainer form input.textinput:hover,
.login.formContainer form input.textinput:focus {
border: 2px solid #fff;
border: 2px solid rgba(255, 255, 255, 1);
}
.login.formContainer form .formbtns {
margin-top: 10px;
}
.login.formContainer {
width: 300px;
margin: auto;
}
/*...................................*/
/*...........button stuff............*/
/*...................................*/
.button {
position: relative;
padding: 5px 10px;
margin: 2px;
font-size: 13px;
background-color: rgba(255, 255, 255, 0);
font-weight: bold;
border: 2px solid;
cursor: pointer;
-webkit-user-select: none;
}
.button.white {
color: #fff;
border-color: #fff;
}
.button.white:hover {
background-color: #fff;
color: #000;
}
.button.emerald {
color: #2ecc71;
border-color: #2ecc71;
}
.button.emerald:hover {
background-color: #2ecc71;
color: #fff;
}
.button.springgreen {
color: #00FF7F;
border-color: #00FF7F;
}
.button.springgreen:hover {
background-color: #00FF7F;
color: #fff;
}
.button.sky {
color: #33ccff;
border-color: #33ccff;
}
.button.sky:hover {
background-color: #33ccff;
color: #fff;
}
.button.orangered {
color: #FF4500;
border-color: #FF4500;
}
.button.orangered:hover {
background-color: #FF4500;
color: #fff;
}
.button.cyan {
color: #2980b9;
border-color: #2980b9;
}
.button.cyan:hover {
background-color: #2980b9;
color: #fff;
}
.button.purple {
color: #8e44ad;
border-color: #8e44ad;
}
.button.purple:hover {
background-color: #8e44ad;
color: #fff;
}<div id="headerContainer">
<div class="columnize full">
<div id="firstrow">
<div id="logo">
<h1>Logo</h1>
</div>
<!--logo-->
<div id="headerprofile">
<div>
<div id="pic">
<img src="http://placekitten.com/g/200/200" />
</div>
<div id="profnav"><a href="#">Log Out</a><a href="#">Settings</a><a href="#">USERNAME</a>
</div>
</div>
</div>
<!--#headerprofile-->
</div>
<!--#firstrow-->
</div>
<!--.columnize.full-->
</div>
<!--#headerContainer-->
<div class="first zigzag">
</div>
<!--.zigzag-->
<nav role="navigation">
<div id="navigation">
<ul>
<li><a href="#" hreflang="en">Home</a>
</li>
</ul>
</div>
<!--#navigation-->
</nav>
<div class="second zigzag">
</div>
<!--.zigzag-->
<div class="columnize content">
<h1>Settings</h1>
<form id="settingsform" action="#" method="post">
<h3>Make changes to your account</h3>
<label class="displayNone" for="usersname">Name</label>
<input id="usersname" type="text" class="textinput" name="name" placeholder="Name" required="required" title="Real first name, maybe a last initial" />
<br/>
<label class="displayNone" for="usersusername">Username</label>
<input id="usersusername" type="text" class="textinput" name="username" placeholder="Username" required="required" title="Your SSB tag" />
<br/>
<label class="displayNone" for="userspass">Password</label>
<input id="userspass" type="password" class="textinput" name="password" placeholder="Password" required="required" title="A unique password" />
<br/>
<div class="formbtns">
<input class="button emerald" type="submit" id="save" value="Save" name="submit" />
</div>
</form>
</div>
</body>Thank you.
Add text-align: center; to #firstrow and display: inline-block; to #headerprofile
#firstrow {
height: auto;
text-align: center;
}
#headerprofile {
line-height: 60px;
display: inline-block;
}