p:first-of-type pulls down left sidebar w/o any

[GroovyMotion]

I have a layout with a fixed top div, left sidebar and main content and I am trying to position the first paragraph in the main section to a 50px margin-top but my left navbar gets pulled down by 50px as well and there is no

<p> in it, what could interfere in my code? Here is my pen: http://codepen.io/GroovyMotion/pen/aeHqt

[Paulie_D]

Based on your current example, I’m assuming that you are referring to the first section (which has no designated class).

If so…

section:first-of-type p:first-child {
  padding-top:50px;
}

would probably do it…although I would just give that section a class and then use that instead.

.myclass p.first-child {
  padding-top:50px;
}

Then again

#container {
  padding-top:50px;
}

works too.

[GroovyMotion]

oh no I am refering to the left-nav, I don’t want it to be pushed down like the main-content section. I tried to rename the main content with the sections but it still doesn’t work.
So far the only way I can force the left nav to stay higher is to add a margin-top: -10px; to the nav.left-nav class. Here is my updated pen: http://codepen.io/GroovyMotion/pen/aeHqt

[Paulie_D]

Are you using a reset.css / normalize?

I applied Normalize and got this: http://codepen.io/Paulie-D/pen/LzaAc

Frankly I’m not sure what precisely you are trying to do.

Are you trying to line up the menu or p with something else?

[GroovyMotion]

no reset/normalize yet as this is just some test to learn different layouts.

Ideally I’d like the left menu’s top position not to be overridden by the main-content section where there are the text paragraphs.

oops have a look at my updated pen, it’s slightly different, I added the footer and centered everything http://codepen.io/GroovyMotion/pen/aeHqt

[Author]

Posts