CSS positioning questions - do I use float, position, or display?

Question

I wonder if anyone can help me understand a little more on positioning

I've read a lot of information regarding floats, position types and flex. I understand the basics of it, but i´m having trouble with the simple things.

1. Which is the regular way professional front end developers use to positioning elements? Do they use float, position: relative|absolute or do they use flexbox or css grid? Or a combination of all?

2. Do professional developers use CSS reset everytime they make a new website?

I am making a header(it doesnt have a nav bar..just a logo and a title) I want the logo to be on the left, and the title on the right.

So if i use inline-block i get this weird result where "World Guitars" is not aligned to the logo, but a little below.

#logo {
  height: 60px;
  width: 50px;
  border: 2px solid #34495e;
  margin: 2px;
  align-self: center;
}

header p {
  font-family: Poppins;
  font-size: 2em;
  margin-left: 500px;
  align-self: center;
}

header p,
img {
  display: inline-block;
}

<header>
  <img src="images/logoGM.jpg" alt="logo" id="logo">
  <p>World Guitars</p>
</header>

If i do it with floats, it gets better, but its still so strange..

header p {
  float: right;
  width: 900px;
}

header img {
  float: left;
}

section nav ul {
  clear: both;
}

<header>
  <img src="images/logoGM.jpg" alt="logo" id="logo">
  <p>World Guitars</p>
</header>

Finally in position:relative, and absolute I'm kind of lost.

Can i use position relative and assign values to my heart's content or is this not recommended?

How do i do it in this case?

Thank you!!

Answer 1

Display vs Position vs Float

In general I would say that the modern way to position elements is to use display properties - typically using display:flex or display:grid on parent elements to position their children, or using display:block, display:inline or display:inline-block on an element to position it self.

Where you would use position:relative and position:absolute is if you need to take an element out of flow. A typical case is if you need some elements to overlap. (ie. if you have three canvases that you are laying on top of each other).

Floats were a standard way of positioning elements (ie getting something to sit on the right of the page) in the old days. But now flex box has come along.

However - where you might want to use floats is if you want text to wrap around the element - like it might in a news paper. This is especially important as now HTML elements don't need to be rectangular. See this example.

CSS Resets

I use them. Why not.

These days, typically you might be using some kind of styling library like Material-UI or Bootstrap anyway, but yeah.

In regards to what you're trying to do.

I would use flexbox here.

You have used 'align-self' here - but align-self only applies to a child of a flex parent.

header {
  display: flex;
  flex-flow: row nowrap;
  /*By default this is row wrap - I like to always be explicit with it*/
  align-items: center;
  /*center vertically, (because the flex flow is row*/
}

img {
  border: solid 2px black;
  max-height: 100px;
  /*size the image*/
  object-fit: scale-down;
  /*make the image keep it proportions*/
}

p {
  font-weight: bold;
  font-size: 2em;
}

<header>
  <img src="https://www.designevo.com/res/templates/thumb_small/black-wing-and-brown-guitar.png" alt="logo" id="logo">
  <p>World Guitars</p>
</header>