I've come across several solutions to my issue, but none of them seem to work in my current situation. I have a banner at the top of my site with two floated columns, and suspect that the navigation menu in the right column may be causing the problem.
Here is the jfiddle I've set up: https://jsfiddle.net/Lhd0soL5/1/
.container {
max-width: 940px;
margin: 0 auto;
margin-top: 0px;
padding-top: 0px;
box-sizing: border-box;
position: relative;
}
.high {
background-color: #FFF;
}
.high .left-col {
width: 33%;
float: left;
height: auto;
padding: 20px 0px;
}
.high .left-col p {
font-size: 140%;
}
.high .right-col {
width: 67%;
float: right;
height: auto;
top: 50%;
bottom: 50%;
}
.site-nav {
float: right;
}
.site-nav li {
list-style: none;
float: left;
border-right: 1.5px solid;
}
.site-nav li:last-child {
border: none;
}
.site-nav ul {
-webkit-padding-start: 0px;
}
.site-nav a {
display: block;
text-decoration: none;
padding: 5px 20px;
}
/* This is the clear fix method */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}<div class="high group">
<div class="container">
<div class="left-col">
<p>Company Name</p>
</div>
<aside class="right-col">
<nav class="site-nav">
<ul class="group">
<li><a href="draft1-1.html">Home</a></li>
<li><a href="contact.html" class="last">Contact Us</a></li>
<li><a href="#about">About</a></li>
<li><a href="#methodology">Methodology</a></li>
<li><a href="#">Products</a></li>
</ul>
</nav>
</aside>
</div>
</div>Appreciate any help! :)