Typical starting template for creating a div container on an entire page?
Morning
I always mess this up somehow, my typical start is below:
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:
14 Replies
Huh. Simple! Thanks 😎
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>
Appreciate that @ἔρως! I need to start saving these presets instead of scratching my head every project start 😂
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
thanks mate, I can always use the wonderful google to add extras 😛
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
perfect thanks!
you're welcome
good luck
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 […]
If you do it like that there will be overflow no?
Html should have height 100% and then body should have min-height 100%
if you reset the default margin on body to 0 there should not be any overflow
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?
it always depends what you want to achieve 🙂