0

This is slightly a philosophical and not 100%-hard code-oriented question, but it has to do with programming standards and I hope it fits the rules.

While learning web development, I have always been intrigued by positioning. My first noob websites looked like this:

<body>
    <h1> Welcome to my website. </h1>
    <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br>
    <p> Copyright 2016 </p>
</body>

However I always felt uneasy doing this - after all, this tag was almost never used in any professional websites I saw, and after asking this question I understood it did not allow for any additional markup and was not semantic.

I looked for other ways, and then stumbled upon position: absolute. I basically used this by setting manual position for every element on my page because I did not know any other way to use position: absolute and not do it that way. The websites looked fine on my screen but the slightest resize ruined them.

Looking for another solution, I just thought of positioning everything with margin. For example, instead of <br><br> I would do margin-top: 5%. I still do this right now and it feels very wrong.

So I was just looking for general advice -- how does the majority do it? What is best practice? There are apparently hundreds of ways to do it and I've looked through many guides and tutorials but I just don't get CSS positioning.

9
  • I would steer clear of using absolute positioning for the general layout of a page, as you've said 'the slightest resize ruins them'. The general rule of thumb I tend to follow is build from the top down using margin-bottom to position the following elements, that combined with floats and clears is the best way I find to work, however like everything, it depends very much on the project.
    – MCMXCII
    Jul 29, 2016 at 7:42
  • 1
    why do i feel like this question belongs in some other place Jul 29, 2016 at 7:46
  • @MCMXCII Thanks! Yes, I think I will do that. Positioning with margins alone seems abit hacky to me, but with floats / clears it seems more human.
    – Joseph
    Jul 29, 2016 at 7:50
  • What is your question?
    – ksav
    Jul 29, 2016 at 7:51
  • 1
    This question is either too broad, opinion based or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details.
    – Paulie_D
    Jul 29, 2016 at 8:43

5 Answers 5

2

The four most commonly used position values are initial, relative, absolute and fixed.

The fixed value is used to position an element at a fixed position on the main screen.

The values absolute and relative are used to put an element in a fixed position relative to a parent. You need to define the element as absolute and his parent as relative.

Then you can do something like this:

<style>
    body{
        position:relative;
    }
    #copyright{
        position:absolute;
        top:5%;
    }
</style>

<body>
    <h1> Welcome to my website. </h1>
    <p id="copyright"> Copyright 2016 </p>
</body>

For more information see w3schools

1
  • All the answers are quite good - but this one is "accepted" because it provides an example.
    – Joseph
    Jul 29, 2016 at 8:45
1

Well thats true if you take position: absolute; your page will never be resizable. If ouy make it with margin it's fine. It's much better than the <br> tag. If you have three 's on one row you can mak float: left; on each <div>. It will fit perfectly. If you zoom out then the fourth <div> on the new row will maybe come up or if you oom in there may be only two div's on a row.

tl;dr Use float: left; for responsive design.

1

Whatever way you want to choose, the problem is that it should render well on most devices using frameworks like Material Design and Bootstrap will help you achieve that, but I generally go with margins and borders since div's are the building block of most professional websites.

0

The positon:absolute;mean that the element is positioned relative to its first positioned (not static) ancestor element.

I am agree with @Blue said it's okay to use margin than <br>. You can use float: for responsive design.

1
  • I know what position: absolute is, and a definition was not exactly what I was looking for. However the float advice is pretty helpful: thanks!
    – Joseph
    Jul 29, 2016 at 7:56
0

I think the good practice is to use margings for blocks positioning. But when we have some spesial cases - some kinds of elements on page wich out of stream it is necessary to use absolute positioning. But I try to avoid it if it's possible in my work

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.