« | 1 | 2 | 3 | Page 4: Clearing Stuff

Clearing Stuff

Short resumé: We have taken three HTML boxes, three layer boxes, stacked them in a nice cascading order and then we’ve nested two more layer items in one of them. These nested items are floated, so that they can sit next to each other within their wrapping box. When you float items they get taken out of what is called ‘the document flow’. This is important to know, hence the emphasis. They are taken out of the document flow, meaning that they don’t really affect anything around them, apart from hogging space, and the surrounding items do not really affect them, which is good in one way (they can sit next to each other peacefully) but odd in another since we want the items below them to move with the document flow as text is resized. Yikes! How do we do that?

With a clearer. (I like simple answers.)

What is a clearer?. For those who are not familiar with this concept, a clearer is an item that anulls whatever disruption that has come to pass before it (in the document flow). It resets things. Now, there are three ways you can clear an item: you can clear the left side (‘clear: left’), you can clear the right side (‘clear: right’) or you can clear both sides (‘clear: both’). When there’s a design such as ours, the best bet is to clear both sides. Partly because we have two flowated items that together fill up the width of the page (i.e there’s no room left for more content next to them) and partly because we want the following content, the footer, to appear beneath the wrapper item containing the floats. So in our case we put a thin, wide box below the floats, use the Div-a-Tron to set identical values as the floats on it, except for the float part. We do not float the clearer. Instead we select the Clear: both option from the Display pop-up. We should also not give this box Height: auto but instead check “Override dimensions” and set the dimension value to the same width as the other boxes by 1px in height. (See all the Div-a-Tron settings here ) Using the Div-a-Tron to explicitly set the width and height means that the box can be any size on the page, it doesn’t really matter. What matters is the value we give it in the Actions palette when we have selected the Override dimensions checkbox. (The reason we want the box to be a different size than it will be when published is that it’s easier to select the box with the arrow cursor, on the document page. That is also why the other boxes have 50px height, they could just as well have a smaller or greater height value. 50px is good because it doesn’t take up much space yet makes it easy to handle. But I digress.)

What we do with the clearer item in this context is to ‘close’ the wrapping item. As long as the floats are left to their own devices, the wrapper remains open. Any content we would add below the wrapper would actually end up within the wrapper item in the published html file. This is of course not noticeable if the page has one coninuous background, but will be very obvious when we start experimenting with different backgrounds. The clearer is in other words vital to make the three-box layout work. Without it, frustration will no doubt ensue.

All we need to do now is apply the Div-a-Tron to the footer box, repeat the steps we used on the wrapper box (on page 2) to make its position relative to the wrapper box, with 0/0 coordinates. Now we can save the document (which you of course have been doing frequently during the course of this guide, yes?) and preview the page in a modern browser, for example Firefox and Safari. It should be said that the construction works very well in Explorer also, but Explorer is not to be mistaken for a modern, standards compliant browser.

Okay, we have a table-less layout. All we need to do now is fill it with content and add some style to that content. And that is the topic for our next installment of DBS.

Now, go practice. If you have any questions, hit on snags or find errors, please contact me and we’ll sort them out.

« | 1 | 2 | 3 | Page 4: Clearing Stuff