Looking to create a layout with two columns, featuring a fixed sidebar on the left and centering the main content area. The goal is for the centered content to remain in place when resized and not move further left than where it touches the nav bar (left: 150px).
Seeking assistance, please!
Below is the CSS:
@charset "UTF-8";
/* My CSS Styles */
body,td,th {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #000;
}
body {
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
}
#nav {
position: fixed;
top: 0px;
left: 0px;
width: 150px;
height: 10000px;
background-color: #D61D21;
text-align: right;
}
#nav a:link {
color: #FFF;
text-decoration: none;
}
#nav a:visited {
color: #FFF;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
text-decoration: underline;
}
#main {
width: 810px;
height: 810px;
margin: 0px auto;
}
And here is the HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Designs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="My Web Designs"></a>
<p><a href="portfolio.php">PORTFOLIO</a> </p>
<p><a href="logos.php">LOGOS</a> </p>
<p><a href="print.php">PRINT</a> </p>
<p><a href="web.php">WEB DESIGN</a> </p>
<p><a href="photography.php">PHOTOGRAPHY</a> </p>
<p><a href="contact.php">CONTACT</a> </p>
</div>
<div id="main">
ENTER YOUR CONTENT HERE
</div>
</body>
</html>
Your help is much appreciated! Thank you.