Typical starting template for creating a div container on an entire page?

Morning I always mess this up somehow, my typical start is below:
<body>
<div class="container">
<other code here for the page>
</div>
</body>
<body>
<div class="container">
<other code here for the page>
</div>
</body>
However I always mess up the CSS and end up with the div container taking up half the page, or only taking up a tiny portion of the page etc etc... Would be great if anyone had a standard "template" they used that they just copy pasted or whatever to get the initial code started on an app. So far the only initial code I have for my apps is below:
*,
*::before,
*::after {
box-sizing: border-box;
}

* {
margin: 0;
padding: 0;
font: inherit;
}

body {
min-height: 100vh;
}
*,
*::before,
*::after {
box-sizing: border-box;
}

* {
margin: 0;
padding: 0;
font: inherit;
}

body {
min-height: 100vh;
}
14 Replies
Mannix
Mannix13mo ago
html,body,.container {height: 100%}
html,body,.container {height: 100%}
CDL
CDL13mo ago
Huh. Simple! Thanks 😎
ἔρως
ἔρως13mo ago
just use one of the available css resets, instead of trying to half-ass your own im not saying you're half-assing your work, but the "starting template" will be always half baked and remove that container div use proper tags like <main> and <footer> and <header> with a <nav> with a <menu>
CDL
CDL13mo ago
Appreciate that @ἔρως! I need to start saving these presets instead of scratching my head every project start 😂
ἔρως
ἔρως13mo ago
you shouldnt, unless you are doing raw html whatever platform you use should have a basic boilerplate html file for you to use out of the box your styles also dont do things like removing the margins around the <body>, provide consistent spacing, a basic font size for stuff... you can watch kevin's "simplest css reser to prevent headaches" video i think it is incomplete, but should do it for you
CDL
CDL13mo ago
thanks mate, I can always use the wonderful google to add extras 😛
ἔρως
ἔρως13mo ago
exactly one extra you can add is to remove the bloody margins from the body this is also the type of stuff for the critical css
CDL
CDL13mo ago
perfect thanks!
ἔρως
ἔρως13mo ago
you're welcome good luck
Islandstone
Islandstone13mo ago
Andy Bell
A (more) Modern CSS Reset - Andy Bell
I wrote A Modern CSS Reset almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated version. I know I also have a terrible record with open source maintenance, so I thought […]
vince
vince13mo ago
If you do it like that there will be overflow no? Html should have height 100% and then body should have min-height 100%
Mannix
Mannix13mo ago
if you reset the default margin on body to 0 there should not be any overflow
vince
vince13mo ago
https://codepen.io/vince1444/pen/poqYMXa If you look at this codepen the text overflows the body if it has a height of 100%. Taking off height: 100% and adding min-height shows the container expanding with the content. I'm not trying to be pedantic with this either; I think there could be some cases where this actually matters?
Mannix
Mannix13mo ago
it always depends what you want to achieve 🙂
Want results from more Discord servers?
Add your server