I am facing an issue with my 2 column layout where the content in the right column is being pushed down to clear the left column, resulting in a lot of vertical white space between the navigation and the content.
Below is the code snippet:
<head>
<link href="/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css">
<style>
.left-column {
padding: 10px;
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
}
.right-column {
padding: 10px;
color: red;
border: 1px solid black;
margin-left: 320px;
}
</style>
</head>
<body>
<div class="left-column">
<p>This is the left content</p>
</div>
<div class="right-column">
<ul class="nav nav-pills">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
<p>This is the right content</p>
</div>
</body>
The issue lies in the fact that the left column is floated, causing the right content to be pushed down. The bootstrap navs have an :after pseudo element with the rule clear: both;, which exacerbates this problem.
I have attempted various solutions such as removing the clear: both; rule, adding other pseudo elements after the nav, and containing the nav in a floated block as suggested on this mozilla page, but so far I have not been successful in resolving the issue.
Your assistance in finding a solution would be greatly appreciated.