Okay, so I have read lots of online tutorials, watched youtube videos, even took some courses but I just can't seem to get past the css box model and positioning or at-least be able to use it to my advantage by building web layouts with it, even the very basic ones. I understand HTML really well but when it comes to positioning elements to create layouts I get completely lost. It's getting really frustrating.
For example some of the questions i keep asking my self like how do you work out the default width and height of an html element before adding anything to it or how to know 100px should go here and 500% there for example.
Any advice would be highly appreciated
frustrated student
Wrong start
First, forget about the box model and limit yourself to the default, {box-sizing: content-box;}
. It is the more rational concept, though not as intuitive as {box-sizing: border-box;}
.
See Mozilla's MDN. All the major browser vendors are in the process of adopting this series as the go-to developers' manual.
Do not use the position property for page layout until you have a strong understanding of levels 2 and 3 css. At that point, you will see that there is seldom a compelling reason for position. Positioned elements are not in the flow and have no knowledge of other elements, a bad thing most times.
See the tutorials at HTMLDog for sane instructions on using html+css+javascript.
gary