Galaxies & Nebulae

This is the Tadpole Galaxy taken by the Hubble Telescope in 2002. As you can see this column does not have a scrollbar. And this is because the text fits in the height of its own "window."

The Core Nebula as photographed by the Hubble Telescope in 2002.

Since this text is longer than what this window can accomodate a vertical scrollbar should automatically appear on the right margin. Mozilla 1.0 and higher, as well as MSIE5.5 and higher correctly display the scrollbar whenever there is an "overflow" beyond the capacity of the box. However, all versions of Opera including version 6.01 (the latest thus far as of July 2002) do not properly implement the overflow property and so all the text spills over and gets superimposed on whatever is below this box.

This is an image of the Omega Nebula taken by the Hubble Telescope in 2002

Window widths and heights can be specified precisely and should the author want to maintain such precise dimensions he can opt to display scrollbars if and when the content does exceed the limits he has set.

The Mice Galaxies are so named because they look like two mice at play. The "tail" was formed I believe when the the two galaxies passed one another, their gravitational fields pulling material out.

The width of this text column is variable since the width property was not specified. I could've just as easily specified a fixed width but I left it as it is. If you resize your browser window you'll see its variable width in action. Actually resizing even to about 80% of maximum browser width will make the text column so thin it'll be unreadable.

On the other hand its height is 180 pixels tall unlike all the preceding columns which all have a 275-pixel height. The attributes in the div element is as follows:

<div> id="scrolltextr1c4" class="scrolltext">

The same properties for the other text columns are applied (class="scrolltext") and in addition the height is revised.

No, this page is not about galaxies and nebulae even if the pictures above by Hubble are stunning (you should see the wallpaper versions!). This page showcases what can be done using CSS positioning schemes.

As you've already seen and read above (you did read the 4 text columns above and fiddle around with the scroll bars, didn't you?) positioning elements absolutely can produce incredible results. And what I've done here is not even leading edge. I can't push the envelope too far or most browsers around will fail to display anything decent.

Take at look at the title of this page (colored dark gray). "Galaxies & Nebulae" is fixed positioned at the top right of the browser window. Vertical scrolling should not affect it. It should remain visible whatever you do—scroll vertically or horizontally, or resize the browser window.

Unfortunately only some newer versions of browsers like Mozilla get this right perfectly. Even Opera 6.01 does not properly implement the right and bottom properties for fixed positioned elements.

If your browser supports fixed positioning then there should be a thin light brown colored band at the bottom of your browser window. It contains some copyright information. This brown horizontal band should not move however much vertical scrolling you do.

Also note that the NASA info is left justified while my info is right justified, with both on the same line. You can resize your browser window and they will stay justified accordingly. I had not padded any non-break spaces between them. Instead I marked up the NASA info in one paragraph and mine in another paragraph. I then floated the NASA paragpraph to the left and right justified the other paragraph. That way they both stay on the same line and will remain on either side even if the browser window is resized (until a minimum width is reached).

Finally, try hovering over the NASA copyright. If your browser supports hover on elements other than a then the phrase "as posted on www.space.com" should appear right after the word "NASA"