list and articles
browser archive

Mozilla Firefox

Updated on February 9, 2004
in Browsers
by William Anderson
rated 4.70/5 (Add your rating)

Overview of layout structure

This design is achieved with tableless markup.

At the top level, there are three main divs: the login panel ("login-panel"), the top menu ("topmenu") and the main area ("main").

The top bits

The login panel is uncomplicated: it contains two forms, with elements displayed inline. The top menu is a little bit tricker: the logo is floated left by itself, and each of "work", "test", "play" and "donate" is a floated div. Each of these divs also contain smaller divs to line up the cube (of the "cube" class, floated left), the title and subheading. The "donate" div has extra padding to the left to achieve the extra space.

An empty div called "heightmarker" is used to help the browser determine the height of the containing div ("topmenu" in this case), so that the background colour renders correctly. This div is used in all cases where it is necessary.

The main bits

The main content area can be identified by the taupe (#cc9) background. It acts as a container for contextual menu ("menu"), and the white content area ("wrapper").

The menu contains three divs: "workmenu", "middle" and "right". "Workmenu" resembles the structure of the cube + title + subheading divs as the "topmenu", in black. "Middle" and "right" are two divs floated side by side.

The wrapper contains two divs: "rightwrapper" and "leftmenu". The rightwrapper is placed first in the HTML file, so that the content is made available to a non-graphical browser sooner.

Suspendisse dictum rhoncus nulla. Donec ut mauris. Etiam vitae velit. Duis sapien arcu, pharetra id, sodales sit amet, ullamcorper at, ligula. Nullam interdum nunc in eros. Cras lacinia, lorem nec ornare gravida, ipsum enim tempus nisl, vitae lacinia lacus elit eu elit. Aliquam sodales nibh eu lectus. In sodales semper tortor. Proin condimentum, arcu nec posuere nonummy, sapien nibh ultrices ante, id venenatis nisl tortor at purus. Donec sagittis felis nec felis. Nulla aliquet nunc sed neque. Curabitur sit amet nulla ut purus dignissim mattis. Donec a urna eget lacus sollicitudin commodo.

Want more?

Download this browser »

Photo of William Anderson

William Anderson

Email | Member info | Full bio

rating 9

User since: Apr 26, 1999
Last login: Feb 16, 2004
Articles written: 1


Stuff, stuff, and more stuff.

Contact me »
Resumé »
Portfolio »