« | 1 | 2 | Page 3: Floating Stuff | 4 | »

Floating Stuff

To recap: in order to get divs (layered items) to stay in flow as text is enlarged or diminished in the browser, we want to change the default positioning from absolute to something else – mostly to relative positioning. Accomplishing that is easiest by using the Div-a-Tron action by Paul Dunning. At this point, we have changed positioning for the topmost item from absolute to relative or static. However static is not always the best choice, because it always displays as “block”, i.e we can’t place any boxes beside a static item, only below it. And at times we want items to line up next to each other, side by side. Cheek to cheek. To make sure this works properly, it is often best to nest such items in a wrapping div, which in our case would be the box we named ‘mainwrap’ (or similar).

Select this box and use the Div-a-Tron’s position options, in the Action palette, to select the position ‘Relative’. Make sure that the box is set to be nested in <none> (in the top pop-up menu). Also make sure to check Publish coordinates and Override coordinates. Set the value for the Top coordinate to 0 (zero) and the same for the Left coordinate. Check the Publish checkboxes for Top and Left coordinates. Check the “Remove z-index” option.

That takes care of the wrapper. Here comes the magic. 1) Select the ‘maincontent‘ box and apply the Div-a-Tron. Now choose to nest this box in the main wrapper box, by selecting its name from the top pop-up list in the Actions palette. 2) In the Position section, choose ‘Relative’, check Publish coordinates, Override coordinates and Publish for both top and left coordinates, which you set to 0 (zero). This will place the item in the top left corner of the main wrapper item. Check Remove z-index, then go to the Display section (click the arrow to display the available options).

Anything floats

In the Display section, select “Float: left” from the pop-up menu. When an item is floated, it is removed from the document flow and nothing will touch it. This behaviour is similar to that of an image that is placed inline in a run of text and set to align left. It doesn’t matter where in the text you insert the image, it will always display at the left edge of the text with the text body running around it. Using CSS positioning (which is what we are doing), ‘anything’ can be floated. Now, what we want is to bring this floating item back into the document flow, to get it to move with the other items as text is resized – that is why we nest this item in the main wrapper. Nesting the content items in the main wrapper means another thing as well; we can use the main wrapper to set a separate background colour or image for this main block. Things are suddenly looking interesting, huh?

So, the main content item is relatively positioned at 0/0 with no z-index and it is floated left. Now go to the Size options and check Height: auto. Leave the Publish and Override checkboxes as they are. Last, go to the Margin and padding section. Here we want to add a right margin to the maincontent item. This right margin will produce a gap, a ‘gutter’ if you will, to the sidebar item, giving it some room to breathe. Set a right margin on the maincontent item at, let’s say, 10px. You can do this either in the field labelled ‘margins’ by typing the shorthand for all four margins (0 10px 0 0) or by simply typing 10px in the field labelled ‘margin-right’. The first is more economic and considered more ‘modern’. the second is better for older browser types that ignore the shorthand (typically Netscape 4) and considered more ‘ancient’. In real life, unless you feel you must consider the older browsers, both work equally well. Personally I use the shorthand but only because I’ve become used to it. One thing you need to consider when adding margins or padding is that these affect the total size of an item and all of the margins and padding of the nested items are added to the total size of the wrappping item. How big the effect is varies between browsers and platforms. (What else?)

Now select the sidebar item and repeat all the steps you did on the maincontent item, except for the last one. The sidebar item doesn’t need a right margin. When you preview the page (not just yet though), the content items should line up nicely side by side and stay that way as text size is changed in the browser. Right now we need to look at restoring the document flow so that the page footer acts the way we want. Meet me on the next page.

« | 1 | 2 | Page 3: Floating Stuff | 4 | »