Before leaping straight into how to use CSS to control your page layouts, we first need to have a closer look at how an HTML page is constructed. I'm talking about something called the "HTML box model". Sound intimidating? Its actually ridiculously simple. Understanding the box model is both essential to everything else that follows and incredibly straight forward.
What is the Box Model?
The box model is just another way of explaining the structure of an HTML page. According to the HTML box model, every tag can be expressed as a box. Each box can contain other boxes (in other words, other tags), or content like text or pictures.
Lets use the following HTML page as an example:
<html>
<head>
<title> poem </title>
</head>
<body>
<h2> Kitten </h2>
<p> The only problem with a kitten is that </br> it eventually becomes a cat. </p>
</body>
</html>
So in the above example, the biggest box of all is the <html> tag. Inside that, is another "box", the <head> tag. This contains yet another box, the <title> tag. And so on.
Its easier to understand if you draw each tag as a box, like this:
Simple, no?
This is the single biggest secret to understanding CSS Positioning. When constructing a page – before you do anything else – draw a HTML box model diagram of that page. If you get that right, the rest will fall into place much more easily.
We arent quite ready to jump into using CSS Positioning yet. First we need to look at a special tag – the div tag.
0 responses so far ↓
There are no comments yet...Kick things off by filling out the form below.