Positioning content

Hi this is will be a simple question for most of you but I was wondering what the best way of moving my <h2>Mark Manson</h2> closer to the writing below it. Here is my code https://jsfiddle.net/vahs1uv6/.

Also I was trying to create a footer. It seems to have gone wrong because I have used top:60px to move my content down the page. How could I move the content down the page without disrupting the footer. By that I mean I would like the footer to also move down along with the writing. At the present it breaks the footer. Here is my code https://jsfiddle.net/vahs1uv6/.

Hi there @05beckga First thing is that headers should be used in the correct order, ie h1 first, then h2, h3 etc. Don’t use them just because the size seems about right - you cn change the size in CSS if necessary.

As for moving the text close, take a look at changing the margins for the h1 / h2 elements.

1 Like

Don’t use relative positioning to move things around as it was not meant to move structural content. Simply use margins.

e.g.

margin-top:60px;

Relative positioning does not actually move anything physically it moves it visually but the element always occupies the same space in the flow that it always did even though it may appear to be somewhere else. All other elements on the page won’t know that the element has been moved and that’s why it overlaps the footer.

When you use relative positioning (with co-ordinates) it is mainly to move an element without affecting the flow of the page so that any of the other elements on the page are not disturbed. It is no use for structural logical content as such. When you need space between adjacent vertical elements then use margins and that will ensure they follow each other logically,

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.