I want to create a simple portfolio website with a two-column layout. The left column will house the navigation links, while the right column will display the content.
Below is the HTML and CSS code I am using:
HTML
<div id="container">
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="about.jsp">About</a></li>
<li><a href="portfolio.jsp">Portfolio</a></li>
<li><a href="contact.jsp">Contact</a></li>
</ul>
</div>
<div id="content">
<p>Some content</p>
</div>
</div>
CSS
html, body {
height: 100%;
font-size: 16px;
margin: 0;
padding: 0;
}
#container {
max-width: 900px;
position: relative;
margin-left: auto;
margin-right: auto;
}
#nav {
width: 20%;
height: 100%;
float: left;
background-color: #FFAD73;
top: 0;
left: 0;
}
#content {
width: 80%;
height: auto;
float: left;
top: 0;
right: 0;
background-color: #73C5FF;
}
li { list-style: none;
}
JSFiddle: http://jsfiddle.net/rcode74/m8w4yj8o/
The challenge I am facing with my current HTML/CSS setup is that when the browser window is resized too narrow, the navigation column overlaps with the content column. I tried setting a min-width for the navigation div, but it caused the content column to move below the navigation column when the browser is made narrow.