WPDFD Issue #55 - October 01, 2002

Thinking inside the box

It doesn't work at all in older browsers, it is inconsistent and unreliable in new ones. As I showed last month, the current batch of popular WYSIWYG editors are not up to it. So why bother with CSS positioning at all? Well, I might as well ask why skydive, climb rock faces, make bungee rope jumps? - It's for the thrill. To be fair, it's a bit more than that. It's the way things are going and in a few years time will be the norm.

The Box

The CSS 'Box' is a bit like a table cell, it holds a block of text together and you can put images in it, or give it a background color or image with various options to repeat or not. You can give it a width and height and position it anywhere on the page, usually relative to the top left corner of the page - but not necessarily so. This is called 'absolute positioning' and is more reliable in browsers and editors.

This diagrams show the basic structure of a single table cell (left) and how it relates to a CSS box (right). Now for the first 'gotcha'! The official W3C specifications require that the padding area goes outside the width and height. This is the major difference between a CSS box and a table cell where the padding goes inside the cell dimensions. In fact, it confused Microsoft so much that in Internet Explorer, they have put the padding on the inside and every other browser - Mozilla, Netscape, Opera etc have done it the 'correct' way.

Boxing Clever

Now, for a CSS box. These are also referred to as 'blocks' or 'divs' but the word 'box' is probably more meaningful. There are two ways to define a box depending on whether it is a unique item on a page or one that can be used multiple times. A page will normally only have one header so it can be specified something like this. #header      {      background-color:navy;       width:100%;       height:48px      } and within the <body> of your page you just put <div id="header"> This is the Header </div> to give you a 48 pixel high, navy blue header along the entire top of the page.

Styling text

So far, I haven't mentioned text styles. If I add a text style definition to the ' body ' style, it will pass down to all the other boxes by 'inheritance'. If we add text style definitions to any of the boxes, they over-ride the inherited styles. Think of the body text style definition (if you provide one) as being the default for everything on the page - unless you tell it otherwise. I prefer to put a really oddball text style definition (say, red Courier) in the 'body' while I'm building the page just to check that everything is more appropriately defined - then I remove it before publishing.

Adding another box

So far, we have three boxes in the layout - 'header', 'content' and 'footer'. I now want to insert another box between the 'header' and 'content' boxes to hold some navigational elements. #navbar      {      color:#99c;      font-size:10px;       font-family:Verdana, Geneva, Arial, sans-serif;       background-color:#fc6;       text-align: center;      margin-top:3px;      margin-bottom:3px;       padding-top:3px;      padding-bottom:4px;      width:100%      } It's similar to the 'header' box, 100% width but with a different background color.

Multiple columns

At the moment, we have a contents area that is a single column of text centred in the browser window. All the boxes we have used so far are stacked one on top of the other on the page because they have not been explicitly positioned absolutely or relatively. To get boxes to sit side-by-side, you have to apply one of the float attributes - 'float: left' or 'float: right'. For multi-column text, you can define a 'class' - in this case called '.col' and I have included the text style as well as the box details.

Netscape Composer

When I started designing Web pages way back in the early '90s, there were no special Web page editors and I had to use a text editor. In those heady days, you couldn't do very much with a Web page, the HTML was fairly simple, so it didn't matter. The first WYSIWYG editor I encountered was Adobe PageMill and it made the process of Web page design so much easier - even if some of the code it produced was questionable.

You won't find this feature in Netscape 7 just yet but you can download a beta version . It's a WYSIWYG CSS editor that works within Composer on Netscape 7 or Mozilla 1.x. It downloads and installs automatically and then shows up in the 'Tools' menu as 'CSS Editor'. It's only at version 0.2.2 so far, but stable enough to use. Although it is a WYSIWYG editor, at the minute, it still requires you to work in text-editing mode in the Composer HTML Source window.