Treehouse: Grow your CSS skills. Land your dream job.

CSS: Trouble Positioning Nav Element

  • # September 23, 2011 at 3:21 am

    I can’t seem to get my nav to sit where I need it to be. My nav is inside of my header and SHOULD be to the right of the h1 & h2, however it seems to be sitting below them and to the right. I’ve been racking my brain for a day or two trying to figure out why this isn’t working, so now I need help from others lol.

    Here’s the test site

    If someone would be so kind as to FireBug it and tell me where I went wrong, I’d greatly appreciate it. Everything questionable it color coded. The nav (blue) is supposed to be INSIDE on the header (pink).

    I’m also trying to do this WITHOUT creating any unnecessary divs. HOPEFULLY this can be worked out without having to do more div wraps as that’s just messy and uncalled for.

    # September 23, 2011 at 3:40 am

    you have applied clear:both to the h2 and the nav tag .Thats what causes the problem.
    And i would strongly recommend putting both the h2 and h1 tags within a div.

    # September 23, 2011 at 7:58 am

    sreejesh, I’m afraid it has nothing to do with the h1 and h2 clearing. The clear will only clear a preceeding float – not one that follows, as in this case. Also, there is really no reason to put the h1 and h2 in a div. What would you gain – they’re already block level elements?

    @psionicsin, you have a couple of options here. You could make the header position: relative and absolutely position the nav; or you could float both the h1 and h2 left, clear the h2 left, float the nav right and pull it up the height of h1 with a negative margin; or you could put the nav before the h1 and h2 in the source and float it right; or you could leave everything as is and pull it into place with a negative top margin.

    I personally would probably use the AP in this case.

    # September 23, 2011 at 8:11 am


    I have checked your site and this is html5. so pl. add “hgroup” tag in html and all h1 and h2 put inside this tag.

    So your structure will become following,

    clear touch visuals

    creative media + motion graphics

    Let it try. Its working for me :)

    # September 23, 2011 at 11:30 am


    Thanks. That did work very well!

    # September 23, 2011 at 11:33 am

    Should I still keep all of the float:left’s on h1, h1 a, and h2…or is that too repetitive and I should remove them?

    # September 26, 2011 at 1:00 am

    Yes keep it remain as it is.

    # September 28, 2011 at 4:00 pm

    @ Ketu

    Can you take a look at the development of it so far and see what’s going on?

    I was told that I could make this work WITHOUT grouping or div-grouping those headers together. However not much explanation went into how I can do this. Would you know based on the current structure of the site?

    # September 28, 2011 at 4:20 pm

    hgroup is not required in that markup.

    # September 28, 2011 at 4:23 pm

    Hard-Refresh your page. hgroup is no longer in that markup.

    It’s supposed to look like this:

    # September 28, 2011 at 4:24 pm

    bad image path?

    # September 28, 2011 at 4:29 pm

    # September 28, 2011 at 4:39 pm

    I didn’t notice the h2 therefore hgroup would be appropriate.

    # September 28, 2011 at 4:41 pm

    psionicsin, I already gave you 4 ways of doing this – and there are others as well!
    Try this: don’t float the h1, h1 a, or the h2; but float the nav right and give it a negative top margin.

    Or don’t float the h1, h1 a, or the h2; and position: absolute; bottom: 0; right: 0; on the nav and position: relative on the header

    # September 28, 2011 at 5:08 pm

    @ChristopherBurton / @wolfcry911:

    I’m trying to make this site as hack-less as possible. I’ve been told to never use positioning as it’s just a fast hack to get around problems that could be dealt with otherwise {professors words, not mine lol}.

    Now I am aware that the floats are causing them not to be how I want them. However, on a strange note, I was told elsewhere that I could float everything in there left and still get the functionality I want. Now I’m getting opposing viewpoints here and am trying to figure out why.

    @wolfcry911 (specifically):

    My original launched markup [after posting here] was an hgroup floated left containing the h1 & h2, and then the nav was floated right, with a top-margin to set it in place. So, I did take your advice (no neg-margin needed).

    BUT…IE, and earlier versions of FF (even with the HTML5Shiv) broke my design. I don’t think they liked hgroup one bit. The Shiv also doesn’t allow IE8 and below to read CSS stylings on HTML5 elements. So now I’m forced to contain the header within the container to make sure they don’t blow up.

    I don’t want to use a neg-margin because I’m afraid it’ll mess up something else in the long run and then I’ll have to do more work in the future. Leaving my only option to be to put the nav before the h1/2 like you suggested.

    Now I’m gonna to cringe when I do this because, in my mind, I wanted the page to flow a certain way when reading the source. That and I considered switching the visual hierarchy of HTML elements another form of a hack. Hmm.

Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.