Solution 1 :

It’s totally okay and also it will render fast – possibly even faster than a normal flow-based content. Text flows require the browser to calculate literally every character’s position and size and only then are they sure about anything that comes after. It’s fairly obvious.

Using absolute or fixed positioning is a lot easier; it’s mostly about pixels, no need to pre-render other elements. Relative positioning is a bit trickier, it can depend on earlier contents; on the other hand, this gives it’s power.

So no, it’s not a sin to use HTML/CSS this way. Check dev console for rendering performance and see how it’s different when you’re trying. But it should be fast, convenient and supported everywhere.

Solution 2 :

You can use different kind of scale types like fr, em, vh or % instead of px, it will more helpful when you chancing the size of the browser or using in mobile apps. You should use px in some part, too. Also, you can use position with other values like absolute, fixed etc.

Solution 3 :

The answer depends on a few factors, but styling the whole website using specifically positioned elements would be considered sloppy.

The reason for this is, that any new content could easily wreck your layout, not to mention having to specifically position everything again for each screen size you wish to support.

You would be much better off using a Flexbox layout (display: flex), or maybe a Grid (display: grid), as these were designed to solve the specific layout issues you might run into.

Even if you feel uncomfortable using CSS, it is worth spending some time getting to know Flexbox and Grid layout, because they can save you a tremendous amount of time and energy on the long run and they really bring back fun to developing frontend layouts.

However… if this is a small static site, and you are fairly sure the content will not change, or will change very rarely and you are comfortable with repositioning a few elements from time to time, you might be better off positioning things manually, if you are not in the position to learn some CSS magic right now.

Also, positioning a few elements here and there using position is completely acceptable.

But for layouts at scale, I’d recommend to go with Flexbox or Grid.

Problem :

I am not very good at CSS, especially when it comes to positioning things on the screen. Is it fine if I eyeball everything and use

position: relative;

with a number of pixels for many of the elements on the page? Is it considered sloppy/unprofessional?

Comments

Comment posted by Angel Politis

If you want all elements to be part of the flow of the document, it’s okay.

Comment posted by Ry-

I would think that’d be a source of future headache, yeah.

Comment posted by robertmain

I mean, it depends what you’re hoping to achieve. If you do this, just be aware of the fact that things may move and/or re-flow with the document.

Comment posted by joemama12345

Would my project be frowned upon when others view the css source code?

Comment posted by Temani Afif

no! don’t do it. You will force each element to be a containing block for its direct child and this is not needed in some cases

Comment posted by joemama12345

Thanks, are their any videos out there that outline what all of these do? And do you think css is worth learning in-depth?

Comment posted by joemama12345

One thing I have trouble with in CSS is the invisible boxes (ex. textbox surrounding text). Is there a way to see these boxes?

Comment posted by whoami

Most browsers have decent developer tools for this purpose. Chrome is best in my opinion. If you are comfortable using your browsers developer toolbar, you can usually see the box if you inspect the elements (right click + inspect or something similar usually). If you are unsure, the quick and dirty way is to give a

By

Leave a Reply

Your email address will not be published. Required fields are marked *