I\'ve started work on a brand new site and i\'ve been playing around with designs for a while, however one problem I seem to be having is regarding positioning a navigation
set top:0
on your navbar
and add 30px margin-top on your wrapper
div
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
top:0
}
#wrapper {
margin: 30px auto 0;
width: 980px;
}
http://jsfiddle.net/duncan/NkRxQ/
Complete solution to solve your problem.
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
top: 0;
}
#wrapper {
margin: 30px auto;
width: 980px;
background: #ccc;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="navBar">
</div>
<div id="wrapper">
<div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 400px;">
<!-- You can create left side elements here (without any float specification in CSS) -->
</div>
<div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 556px;">
<!-- You can create right side elements here (without any float specification in CSS) -->
</div>
<div class="clear"></div>
</div>
</body>
</html>
Starting brand new site should contain DOCTYPE and 0 margin for all tags. (Very helpful thing).