Menu
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 bar with a full screen width that is fixed to scroll. Underneath i have created a div called "wrapper" which is set to centre at a width of 980px. Below is code example;
<style>
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
}
#wrapper {
margin: 0 auto;
width: 980px;
}
</style>
<div id="navBar">
</div>
<div id="wrapper">
<div style="border: 1px solid RGB(0, 0, 0); float: left; height: 500px; margin: 5px; width: 400px;"></div>
</div>
The box i created within "wrapper" SHOULD (obviously isn't because i'm doing something wrong - somewhere) sit 5px below the navBar, however because I have used position: fixed it sits underneath it instead. Could anybody lead me to how I solve this issue and have it so that the wrapper sits directly below rather than underneath the navbar whilst maintaining it's centering?
897
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
1)static: this is the default value. 2)sticky: the element is positioned based on the user's scroll position. 3)fixed: the element is positioned related to the browser window. 4)relative: the element is positioned relative to its normal position.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
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/
63
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).
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
