Hi

I am developing the page design of my website and I having difficulty with the positioning of the main content. Despite using margin-top css, I can't move the content down as the slider is covering it. Also, the content also gets hidden by the footer.

Any help would be really appreciated.

 

The page is hosted at http://calebkingcott.com/pagerepair.html

 

Thanks,

 

Caleb

You should change the slider div to have a relative position instead of absolute, which will then force the content below it to move down.

 

#slider {
position:relative;
}

It's absolute position is causing the next element (the container) to move upwards because an absolute position basically takes the div off the map so to speak, so the next element will go off it's parent element, which in this case is your wrapper (as the header, nav and slider all have absolute positioning).

 

Hope that makes sense!

 

Anyway, the position: relative on the slider element fixes your problem.

Thanks Lyndsey, that worked a treat!

I think I'll go back and learn more about positioning as I still struggle with it a bit.

 

Thanks again