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•15mo ago

html,body,.container {height: 100%}

html,body,.container {height: 100%}

CDLOP•15mo ago

Huh. Simple! Thanks 😎

ἔρως•15mo 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>

CDLOP•15mo ago

Appreciate that @ἔρως! I need to start saving these presets instead of scratching my head every project start 😂

ἔρως•15mo 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

CDLOP•15mo ago

thanks mate, I can always use the wonderful google to add extras 😛

ἔρως•15mo 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

CDLOP•15mo ago

perfect thanks!

ἔρως•15mo ago

you're welcome good luck

Islandstone•15mo ago

https://andy-bell.co.uk/a-more-modern-css-reset/

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•15mo 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•15mo ago

if you reset the default margin on body to 0 there should not be any overflow

vince•15mo 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•15mo ago

it always depends what you want to achieve 🙂

Gaming

Programming

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