I’m trying to do a BASIC layout with a 100% left sidebar that I wan’t to take up the whole browser window height wise. Then my content will go in the big area on the right.
How I want it to appear is so when you scroll, only the content scrolls. So essentially the left sidebar is “standing still” (fixed).
Just looking to see if this is set up correctly, because I was getting some nasty page errors. My page wont scroll on the right. The content just goes down and disappears.
EDIT: Ah noticed I had the #holder (right) side set to fixed. I took that off but now half of the content on the right, is behind the left sidebar. But if I up the resolution on my browser, the content all goes to the right. So I have some big styling issues here. If anyone could help I would love you forever!
Thanks
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Webdesigncove</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="leftBar"> <!-- Begin Sidebar div-->
<h1 class="logo">Web<font color="#ffa800">design</font>cove</h1>
<br />
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forums</a></li>
</ul>
<font color="white"><center><i>(Underlines on lists are cool)</i></center></font>
</div> <!-- End Side bar div-->
<div id="holder"> <!-- Begin Content Div -->
<article> <!-- This is a blog post, or 'article' -->
<h1 class="postTitle">Article Title, This Article Rules</h1>
<img src="articleimage.jpg" width="490" height="200" alt="article image">
<p>This is a preview text on what the current article is about. Since we will be using Wordpress, the more tag will be highly used.</p>
</article> <!-- Ending the blog post -->
<article> <!-- This is a blog post, or 'article' -->
<h1 class="postTitle">Article Title, This Article Rules</h1>
<img src="articleimage.jpg" width="490" height="200" alt="article image">
<p>This is a preview text on what the current article is about. Since we will be using Wordpress, the more tag will be highly used.</p>
</article> <!-- Ending the blog post -->
<article> <!-- This is a blog post, or 'article' -->
<h1 class="postTitle">Article Title, This Article Rules</h1>
<img src="articleimage.jpg" width="490" height="200" alt="article image">
<p>This is a preview text on what the current article is about. Since we will be using Wordpress, the more tag will be highly used.</p>
</article> <!-- Ending the blog post -->
<article> <!-- This is a blog post, or 'article' -->
<h1 class="postTitle">Article Title, This Article Rules</h1>
<img src="articleimage.jpg" width="490" height="200" alt="article image">
<p>This is a preview text on what the current article is about. Since we will be using Wordpress, the more tag will be highly used.</p>
</article> <!-- Ending the blog post -->
<article> <!-- This is a blog post, or 'article' -->
<h1 class="postTitle">Article Title, This Article Rules</h1>
<img src="articleimage.jpg" width="490" height="200" alt="article image">
<p>This is a preview text on what the current article is about. Since we will be using Wordpress, the more tag will be highly used.</p>
</article> <!-- Ending the blog post -->
</div>
<!-- End Content Div-->
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
* {
padding: 0px;
margin: 0px;
}
body {
background: #f5f5f5;
font-family: Helvetica, Arial, sans-serif;
}
#leftBar {
background-color: #333333;
top: 0px;
bottom: 0px;
left: 0px;
position: fixed;
width: 262px;
box-shadow: 6px 2px 8px rgba(0, 0, 0, 0.80);
-moz-box-shadow: 6px 2px 8px rgba(0, 0, 0, 0.80);
-webkit-box-shadow: 6px 2px 8px rgba(0, 0, 0, 0.80);
}
#holder {
width: 700px;
margin-left: 263px;
padding-left: 50px;
margin-top: 10px;
height: 100%;
float: right;
position: fixed;
}
@font-face {
font-family: BEBAS;
src: url("http://webdesigncove.com/fonts/BEBAS___.ttf")
}
h1.logo {
font-size: 26px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
text-transform: uppercase;
line-height: 1.2em;
letter-spacing: -3px;
color: white;
text-align: center;
padding-top: 10px;
}
h1.postTitle {
font-family: BEBAS, Helvetica, Verdana, Sans-Serif;
}
p {
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 1.45em;
}
#navigation {
padding: 0;
margin: 0;
text-align: center;
}
#navigation li {
list-style-type: none;
}
#navigation a:link {
font-family: BEBAS, Helvetica, Verdana, Sans-Serif;
font-size: 24px;
color: white;
}
#navigation a:visited {
color: white;
}
#navigation a:hover {
color: #ffa800;
}
