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.

Community
  • 1
  • 1
Joseph
  • 1,003
  • 3
  • 11
  • 25
  • 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 '16 at 07:42
  • 1
    why do i feel like this question belongs in some other place – Mark Perera Jul 29 '16 at 07: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 '16 at 07:50
  • What is your question? – ksav Jul 29 '16 at 07:51
  • @ksav If you read to the end of the post, you would know. `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.` – Joseph Jul 29 '16 at 07:52
  • 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 '16 at 08:43
  • Absolute positioning is a **very** poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options. Check out [**LearnLayout.com**](http://learnlayout.com/) – Paulie_D Jul 29 '16 at 08:44
  • @JosephA. I know that docs are sometimes boring, but have a read of these: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model https://developer.mozilla.org/en-US/docs/Web/CSS/position – ksav Jul 29 '16 at 08:57
  • I would say as a general rule of thumb, you should only ever use absolute positioning when you need something to overlap something else, eg modals, galleries, navs, etc. As for using `br`s, that's what padding and margin is for - I would only use `br`s for a break in a sentence or a break between sections - not for styling. – Pete Jul 29 '16 at 09:28

5 Answers5

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

polamoros
  • 259
  • 1
  • 7
  • All the answers are quite good - but this one is "accepted" because it provides an example. – Joseph Jul 29 '16 at 08: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.

Blue
  • 35
  • 2
  • 10
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.

Fenn-CS
  • 863
  • 1
  • 13
  • 30
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.

Jalon Juanis
  • 65
  • 12
  • 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 '16 at 07: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

Alice
  • 71
  • 8