I CANNOT get this div to close... Why?

Question

So I'm working on a portfolio website for myself (just for fun), and I have gotten a nav bar developed that I really like. Now, I cannot seem to close the overall nav bar div parent, and every div that I insert seems to appear inside the nav bar div as a child, even though I've checked about 20 times to make sure everything is closed. Did I do something in my CSS that is forcing it to stay open and create more children?

If you look in the HTML code, the picture div keeps appearing inside my nav bar. It's extremely frustrating.

<DOCTYPE html> 
<html>
<head>

    <title>Jeff Lester | Portfolio</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body>

    <div class="nav">

        <div class="buttons">

            <div class="programming">
                <p><a href="#">Programming</a></p>
            </div>

            <div class="cinematography">
                <p><a href="#">Cinematography</a></p>
            </div>

            <div class="photography">
                <p><a href="#">Photography</a></p>
            </div>

            <div class="skills">
                <p><a href="#">Skills</a></p>
            </div>

            <div class="bio">
                <p><a href="#">Bio</a></p>
            </div>

            <div class="jeff_lester">
                <p><a href="#">Jeff Lester</a></p>
            </div>

        </div>

    </div>

    <div class="picture"><p>Picture</p></div>

</body>

</html>

body {
    background-image: url('retina_wood_@2X.png')
}

/* Navigation Bar */

.nav {
    background-color: #F5F5F5;
    height: 75px;
    width: 100%;
    position: fixed;
    line-height: 70px;
    border-top: 4px solid #6E94E6;
    border-bottom: 1px solid #DEDEDE;
    opacity: 0.80;
}

.nav a {
    color: #858585;
    text-decoration: none;
    display: block;
}

.nav a:hover {
    color: #303030;
}

/* Approx. 62% of page */
.nav .buttons {
    width: 1202px;
    margin: 0 auto;
}

.nav .buttons .programming {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-right: 1px solid #DEDEDE;
    float: right;
}

.nav .buttons .cinematography {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-right: 1px solid #DEDEDE;
    float: right;
}

.nav .buttons .photography {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-right: 1px solid #DEDEDE;
    float: right;
}

.nav .buttons .Skills {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-right: 1px solid #DEDEDE;
    float: right;
}

.nav .buttons .bio {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-left: 1px solid #DEDEDE;
    border-right: 1px solid #DEDEDE;
    float: right;
}

.nav .buttons .jeff_lester {
    background-color: #6E94E6;
    height: 70px;
    width: 100px;
    text-align: center;
    border-left: 1px solid #DEDEDE;
    border-right: 1px solid #DEDEDE;
    margin-right: 400px;
    float: right;
}

.nav .buttons .jeff_lester a {
    color: #F5F5F5;
}

.nav .buttons .jeff_lester a:hover {
    color: #303030;
}

That really makes no sense. Lots of fixed navbars have I seen but I am seeing this behaviour for the first time. — knitevision, May 11 '14 at 00:35
Yeah, it's very bizarre. I made another website with a nav bar that was fixed and it caused no problems. I cannot seem to find a diagnosis! For now, I'm just building the site with it un-fixed, and I'll figure it out later. Hope it doesn't come back to haunt me! — ffej, May 11 '14 at 02:15

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

Thats because the .nav element is position:fixed. Changed to position:relative and done

here is fixed

http://jsbin.com/fokunixa/1/edit

Update:

to make the .nav fixed without affecting the others element(in this case .picture) you have to set the .picture relative and give some margin from top.

.picture{
  position:relative;
  top:20px;

}

Here the example.

There are some great post that talk about positioning:

Difference between style = "position:absolute" and style = "position:relative"

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

edited May 23 '17 at 11:53

Community

1
1

answered May 11 '14 at 00:15

Misters

1,337
2
16
29

I wanted my nav bar to be stationary on the screen while scrolling down. Is there another way I can do this without the position:fixed tag? Edit: This did fix the problem, but now my nav bar won't stay fixed while scrolling! – ffej May 11 '14 at 00:18
If he adds any elements on top .picture, again he need to add padding for that.. Instead adding padding to the body{} – mohamedrias May 11 '14 at 00:27
@user3624485 I have mentioned that workaround in my answer below – mohamedrias May 11 '14 at 00:29
@mohamedrias I gave my answer based on this request(.picture element in this case) if he wants a general fix, he must ask them – Misters May 11 '14 at 00:30
1

@Misters Yes, I agree to your point. I feel its always better to give a future proof solution as i dont want him to ask another question when he adds extra element above .picture :) – mohamedrias May 11 '14 at 00:33
1

Realy? You honestly thought that `.picture` was the only thing that was going to be under his `.nav`? Of course he wants a general fix, not just a patch! And then you decided to go for `position: relative` in stead of just adding some `margin-top`? You are not developing for me any time soon... – Pevara May 11 '14 at 00:53

mohamedrias · Answer 2 · 2014-05-11T00:55:06.353

0

First option: Remove position: fixed; from the .nav

DEMO

   .nav {
        background-color: #F5F5F5;
        height: 75px;
        width: 100%;
        line-height: 70px;
        border-top: 4px solid #6E94E6;
        border-bottom: 1px solid #DEDEDE;
        opacity: 0.80;
    }

If you really want your .nav to be fixed while scrolling the page, then

DEMO

Add padding to your body

 body {
        background-image: url('retina_wood_@2X.png');
        padding-top: 80px;
     }

Add top:0 in .nav

.nav {
                    background-color: #F5F5F5;
                    height: 75px;
                    width: 100%;
                    position: fixed;
                    line-height: 70px;
                    border-top: 4px solid #6E94E6;
                    border-bottom: 1px solid #DEDEDE;
                    opacity: 0.80;
                    top: 0;
                }

edited May 11 '14 at 00:55

answered May 11 '14 at 00:24

mohamedrias

18,326
2
38
47

@PeterVR I wanted to give a future proof solution. The answer by Misters gives temporary solution as he adds top to .picture. If the OP adds any elements above .picture then he need to add top for that as well. So i have added padding to body itself – mohamedrias May 11 '14 at 00:41
exactly. It is what I did in my answer as well, be it with margin-top, but with the same goal. I really don't get the downvotes?... You got a +1 from me! – Pevara May 11 '14 at 00:45
btw, if you want your answer to be really perfect, you should remove the `px` after the 0. 0 is just 0 and requires no unit... ;-) – Pevara May 11 '14 at 00:54

score 0 · Answer 3 · answered May 11 '14 at 00:36

You can keep the postion fixed if you want that effect. You need to take into account however that fixed positioned elements are lifted out of the document flow. That is why your 'picture' is not getting pushed down to the postion you would expect it to be and it appears to be inside your nav.

This can easily be solved by adding a margin-top to your body that equals the height of your fixed header, and setting the top value of your header to 0.

I went ahead and copied your code to a fiddle and added my suggestions: http://jsfiddle.net/uHFv4/

Off topic: just because I can't help it, I know that this is not codereview, but your markup is quite horrible. You navigation is a list of links and should look something like:

   <nav>
        <ul>
            <li class="programming">
                <a href="#">Programming</a>
            </li>
            ...

And in your css, you write all the styles for each button, while most often they are all the same except for the width. I sense some room for improvement there...

score 0 · Answer 4 · answered May 11 '14 at 00:55

When you using floats, they change the layout of the page. the document dosen't render a height for them. In the picture class you should write clear:both; to clear the floats and change the position of the nav to position relative as answered above. Like this:

.nav {
    background-color: #F5F5F5;
    height: 75px;
    width: 100%;
    position: relative;

    line-height: 70px;
    border-top: 4px solid #6E94E6;
    border-bottom: 1px solid #DEDEDE;
    opacity: 0.80;

}

.picture{
    position: relative;
    clear: both;

}

If you want to keep your header as position fixed then you can specify that it stays at the top of the document with top: 0px; and then give the picture class a top margin of 70px or so, i.e the height of the nav. like this:

.nav {
    background-color: #F5F5F5;
    height: 75px;
    width: 100%;
    position: fixed;
    top: 0px;

    line-height: 70px;
    border-top: 4px solid #6E94E6;
    border-bottom: 1px solid #DEDEDE;
    opacity: 0.80;

}

.picture{
    position: relative;
    margin-top: 70px;


}

I've tested both of these and they work :) Good luck :)

Instead of adding margin-top to picture, try adding it to the body. Because if the user adds any DOM above .picture , then he again need to add margin-top on that as well. So let the answer be generic & future proof. — mohamedrias, May 11 '14 at 02:31

I CANNOT get this div to close... Why?

4 Answers4