Alternative to negative margins

Design help General
1

Hi everyone, I need to position image on the left site of the header and vertical separating line , so I haven’t found anything better than applying “-131” margin to “Uber Mich” paragraph, I am not sure it is a good tone in css, even though it works perfectly, what is the better way to do it? Thanks

Here is my public share link: LINK
(how to access public share link)

890×682 385 KB

2

Negative values aren’t to avoid. It doesn’t mean your code is dirty.

However, negative values to position horizontally can almost always be avoided in favor or something simpler, more solid, easier to maintain, more “elastic” (which means it will behave nicely across breakpoints without too much static parameters.

I see you got rid of the negative values, is your issue solved then?

1 Like
3

No, I still have it for my titles, but as you said it doesn’t seem to create much trouble, Thanks!

1278×537 182 KB

4

OK I see.

Let’s review another method.

Generally speaking, when you’re facing this situation where you’ll have several elements overlapping, that need a specific, controlled position, you’re going to rely on absolute positioning.

Absolute positioning need a reference point. In order to have a good reference and to get a good control on the elements needing positioning, it’s a good practice to start to put all those elements in a container. The container will be our reference point.

So we start by creating a div, give it a name and make it position:relative. doing so doesn’t change anything visually but this is needed for what comes after.

http://vincent.polenordstudio.fr/snap/fn9i5.jpg

http://vincent.polenordstudio.fr/snap/ak81s.jpg

I also removed the margin properties of the image.

So we get that.

http://vincent.polenordstudio.fr/snap/je7gb.jpg

Now, we pass the image position:absolute. It will then be positioned regarding its most closest positioned parent, that’s why we gave relative to the container.

It’s now easy to position it wherever we want, and it doesn’t affect any other element.

http://vincent.polenordstudio.fr/snap/je7gb.jpg

To master positioning, you can read this: http://inb4.webflow.io/posts/master-absolute-positionning

1 Like
5

Thanks a lot @vincent

Very well put and unfolded. It works. :clap:

6

Great, now you’re master of positioning :slight_smile:

1 Like
7

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