Fifth Tutorial -- Layout with CSS

Here we meet again. But I guess no body seems to be paying attention to my newsletter, even if I devote 2 hours to typing each letter. And I know that many people seems so unwilling to read through my tutorial that they even complain in their assessments. Well, I do want to make this newsletter a serial tutorial. It's for your good. If you feel boring, you may tell me and we may discuss some changes in presentation. But if you are not satisfied with the content or you just want me to present those materials already shown in the class, I guess this site is not your site to visit.

Talking about layout, we generally will think of 2 modals. I would like to call the first mdal: Pin modal, because in this modal we assign a certain number for the positioning of an object. Say we want image 1 goes up to the top-left side of the webpage, or we want the navigation bar stay always 20px to the right border of the webpage, etc. In CSS, we have a set of attributes to finish positioning, that is top, right, bottom, right and position. The attributes named "top", "right", etc, is easy to understand. They give the direct position information to the browser, helping it to place objects on the screen. The position attribute includes many options, the most commonly used two are illustrated below.

The second model is mostly used in print materials like news paper and books. I would like to call it: flow. Text in the content is like a stream. It flows from up to down, from left to right (though you may change its direction in CSS). When it comes to some blocks, say a piece of image or an input box, it would choose to flow by its left or right side. Or it can even choose to skip the block and appear after the block afterwards. Actually we have been using this modal for long in Microsoft Word and some other word processor. In CSS, the two attributes we use is float, and clear.

I am sorry that I can not up load the other illustration in this entry. So you will see it in another entry. Generally speaking, the two ways interfere with the other. In design, we can only choose one to go--place it somewhere definitely, or let it float as the window resized. And in the flow method, we may only adopt one attribute: float or clear. We can't use both at the same time.

The advantages of using the Pin method are that firstly, it is easy to be done. Calculate carefully then your creationg will be pixel-exact. Secondly, objects can overlap each other to create a feeling of layer. You may use the z-index attribute to decide which stay at top or bottom. But it also shows weakness when we resize the window. Some items we originally don't want to make overlapped now is because resize. Worse still, it's impossible to place a constant footer at the bottom by using this method.

Though not transparently easy to use, the flow method shows great advantage in placing objects among text. If you want your picture surranded beautifully by text flow, this is your choice. It also gives uncomparable flexibility when the web page is resized. The 3-columns page can still look 3-columns after resize. In addition, it enables you to place an constant footer below your page.