Previous: basic CSS syntax
Welcome again to another lesson of HTML and CSS with Fang! Today we’ll be covering div containers. But first, a reader question!
Ada: I’ve seen the meta charset thing before, but what does it do?
Answer: Like I said, it defines the character set the browser should use for this document. You can tell it to use Chinese characters, or our regular Latin alphabet, all kinds of things. This somewhat old page should provide more detailed information if you want it.
Moving on now. Today we’re covering divs. The div tag (
) defines a division, often used for grouping elements. That may not mean too much, so I’ll explain it in a different way. If you, in your CSS, tell a div to be 100×100 pixels, and have the background-color green, you’ll get a green 100×100 square on your page. In that square (between the
tags) you can enter your text, and image, or more divs, and it’ll all stay in that square (assuming it fits. If you put 9001 words in a small square it’ll overflow out of the bottom).
Below I’ll throw in the basic divs for our basic website. As usual, copy it over to your own HTML file and admire your work in your browser of choice.
I’d put a lorum ipsum here but that’d add unnecessary “code”.
Try fiddling with the code a bit. See what it does when you change a value, etc. For a full list of HTML tags and CSS properties, click their respective links.
It seems like a lot of code, but this is a piece of cake once you know what it all means. let’s start with the HTML, and leave the style be for a little bit.
You can see that in every div tag, I define an id. This is basically naming the div so that the browser can see the difference between that div and the others. In the divs I put some makeshift text to show it gets neatly put in the divs.
The wrapper div is a big one that contains all the others, to prevent them from crawling out, so to speak. You’ll be needing this bad-boy when you do more complicated designs.
That was really all that’s to the HTML. The CSS is where the fun starts, though.
The hashtag (#) defines it has to apply the following properties to elements with the id behind the hashtag. Like telling a painter to paint your walls, not your floor.
For the wrapper, I took a random size. 700px heigh and 700px broad seemed fine. I then defined its left and right margins. A margin is basically an invisible border. You can use the margin to make sure the divs don’t touch each other, or stay at least that amount of pixels off of the side of the screen. By telling the left and right margin of the wrapper to auto, I told them to automatically chance themselves as they see fit. Together, they make sure the wrapper div gets centered on the page.
For the header, I chose 200px heigh and 900px broad (the same as our wrapper). I also told it to have a margin of 20px. And that’s important: by telling it to have 20px extra around the sides, it could no longer fit in the wrapper, so it’d appear all messed up. That’s why I reduced it’s size to 160px heigh and 860px broad. Also gave it a nice background-color so you can actually see it.
I did the same for the menubar and the mainpage. They got float attributes, though. Floats define where the divs should “align” to. It isn’t really aligning, but floating something to the left allows other elements to wrap around it on the right. For simple designs like this, it isn’t all important, but it is later on!
Whoosha, that’s all there’s to it. You now have a simple site design. Put content in the divs and you’re almost ready to go!
Next time I’ll teach you how to spruce it up a bit more, because it looks a kind of boring right now.
Until then, if you have any questions, ask them in the comments!
(You have no idea how fucking long it took me to write this. And it seems like a big wall of text, but you’ll have to bear with that for now. on-line examples will come when I get my custom domain.)