Positioning a "wrapper" div underneath a fixed navigation bar?
Asked Answered
U

2

13

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?

Untraveled answered 24/5, 2013 at 11:11 Comment(2)
I think you will need to set a top margin to your wrapper equal to the navbar height...Kassia
I did try this however because it is sat underneath the navbar it also pushes the navbar down by 30px. I'm usually good at finding workarounds but something as basic as this has me stumped.Untraveled
G
15

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/

Godard answered 24/5, 2013 at 11:18 Comment(4)
Brill! seems to have done the trick :) Is this the solution to ANY position: fixed issues in terms of overlapping? Also is there any way you can see of that i could improve my layout or is it pretty much how it should be?Untraveled
I did this, but then if I do <a href="#experience">Experience</a>, the navigation bar covers the title.Latvian
Similar situation with me where the height of the navigation bar is dynamic (I put "word-wrap: break-word" in the css). What should I write in wrapper file?Vituline
What if my navbar height is dynamic depending on scroll?Lipoid
V
1

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).

Vinia answered 24/5, 2013 at 11:31 Comment(3)
May i ask what the clear is used for? Also a problem I am having is i used the solution provided below however everytime i create a new element it just throws the layout i have created. Is there anyway i can create some form of permanent fix to make it become unaffected by any other elements? I have to used the float style element on every element to solve the issue however i dont want to float every itemUntraveled
.clear is used to make the wrapper div appear. otherwise it will be in 1px height, because you specified float: left for inner div of wrapper div.Vinia
I mean whenever i create ANY element i have to apply float to it or it simply just breaks my layoutUntraveled

© 2022 - 2024 — McMap. All rights reserved.