Jump to content

BEST PRACTICE: always 100px from left and right of page?


ChenXiu

Recommended Posts

I always want 100px from left and right, no matter how much the browser is resized.
I currently have: html { padding-left: 100px; padding-right: 100px; }Is this the best way?
Is this the best way?

Comments:
1.) Putting it in "body{" works the same.
2.) Using "margin-left: 100px; margin-right:100px;" works the same.
3.) Setting body and html to margin:0; padding:0; and putting 1 big div in the body with 100px padding/margin works the same.

With so many ways, what is the "accepted Best Practices" way of doing this?

My html pages are super simple: just 4 rows!
1st row: header links. 2nd row: big logo. 3rd row: big paragraph. 4th row: footer links.

Thank you.

Link to comment
Share on other sites

The only real "best practice" is to use as little and as simple CSS as necessary to get the desired end result.

The two main answers here are typically either (a) padding on the HTML or (b) margin on the BODY. You could use DIVs but that tends to make it more complicated. Which you use depends on the rest of your CSS, especially whether you already do anything to the HTML and/or BODY elements, but a margin on the BODY tends to conflict less with other styling.

Link to comment
Share on other sites

@requinix, thank you, that sounds the simplest. Also, your response made me further investigate the difference between padding and margin. I'll definitely go with margin (for housekeeping reasons, I'll set html to margin:0 padding:0 also).

@Strider64, I was learning about those a few days ago, I don't think I'm "at that knowledge level" to implement those yet. But thank you for the suggestion.

1 hour ago, Barand said:

Do you still want to lose 200px on the margins when it's being veiwed on a narrow phone screen? Something to consider.

@Barand, thank you for pointing that out. I didn't even think of that. After I read your response, I stuck this into my stylesheet to tide me over:

@media all and (max-width:600px) {
  html, body { margin:0;padding:0;text-align:center; }
}

... however, this "fix to tide me over" seems to work and look really well. So maybe that's okay

At one point, I tried making everything "responsive" using "vw" and various "stretchy" css, but it crossed the line between "this is how I want my website to look" and "let's please everybody in the world."

ALSO IF ANYBODY WANTS TO COMMENT ON THIS:
I am finding CSS annoying sometimes. For example if I want to vertically center 3 items in a row and maybe have 2 of those items grouped together on the right, I have to implement an absolutely RIDICULOUS TANGLED mess of nested upon nested divs, floats, or flexes, blah blah blah, when all I need is a good ol' fashioned <table><tr><td>.
I'd like to go "PURE CSS" but I can't bring myself to replace some of the simple <table> code with 100 lines of CSS code. You should see the crazy hour-long youtube tutorials how to spend days making 2 damn items line up side by side when all you need is a <td valign="center"> that still works on all browsers 😀 I'm open to anyone yelling at me for this. I'm easily persuaded by the experts here :-)

Edited by ChenXiu
Link to comment
Share on other sites

1 hour ago, ChenXiu said:

(for housekeeping reasons, I'll set html to margin:0 padding:0 also)

Also known as a CSS reset. Not as common nowadays since browsers have been better at getting their acts together, but still around.

 

1 hour ago, ChenXiu said:

For example if I want to vertically center 3 items in a row and maybe have 2 of those items grouped together on the right, I have to implement an absolutely RIDICULOUS TANGLED mess of nested upon nested divs, floats, or flexes, blah blah blah

If you want something that feels like a table then you probably want the Grid layout that Strider64 mentioned. Flex and CSS 3 also have some tricks you may not be aware of.

Link to comment
Share on other sites

14 hours ago, ChenXiu said:

For example if I want to vertically center 3 items in a row and maybe have 2 of those items grouped together on the right, I have to implement an absolutely RIDICULOUS TANGLED mess of nested upon nested divs, floats, or flexes, blah blah blah, when all I need is a good ol' fashioned <table><tr><td>.

Yeah, you want flexbox.

There's also the idea that HTML should be semantic and a table should be used for tabular data output only. I don't know for sure that Google penalizes non-semantically correct HTML because Google prides themselves on not letting anyone know how they rank sites, but anecdotal evidence points to that being the case.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.