CODEWITHSUNDEEP
css
Tim
Tim

Reputation: 2649

CSS to push content down page

On a web page I'm working on I have a fixed #top section containing the nav which is causing the content below to partially hide behind it.

The page is this: http://s361608839.websitehome.co.uk/pt-build/templatebuild/

I've tried adding margin-top to #slider and margin-bottom to #top to try and push each other apart but none of those have worked.

Any ideas?

Upvotes: 5

Views: 35866

Answers (5)

devDeejay
devDeejay

Reputation: 6019

You can use

div.anythingSlider{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

top: 50% will shift your content down while translateY will put it back in place.

Upvotes: 1

Emil
Emil

Reputation: 8527

just change 

div.anythingSlider {
  position: relative;
  padding: 110px 350px 28px 45px;
}

I changed the top padding from 0 to 110px

Upvotes: 3

LAW
LAW

Reputation: 1171

Use padding-top:150px; on the div with class anythingSlider

Upvotes: 0

Kokos
Kokos

Reputation: 9121

Your #top is fixed, so the margins won't work.

You have to do two things to fix this problem:

  1. Give your body a padding-top or margin-top equal to the height of #top (151px)
  2. Give #top a top:0; so it still sticks to the top of the page.

Upvotes: 2

oezi
oezi

Reputation: 51807

just add top: 0; to #topwrap and margin-top: 100px to body. (replace 100px with a value you like, 100px is the minimum to see the first heading, but your #topwrap is 151px tall - just try wich looks best)

Upvotes: 0

Related Questions