Employment
FlyByNight Airlines. Now hiring.
We need personell for all disciplines.
Inquire at 800-555-1212, or email your
resume to fbnAirlines@cs.com.
Here, column 1,
is a probable spot for a
vertical navigation
menu. This div has a fixed width.
FlyByNight Airlines. Now hiring.
We need personell for all disciplines.
Inquire at 800-555-1212, or email your
resume to fbnAirlines@cs.com.
FlyByNight Airlines. Now hiring.
We need personell for all disciplines.
Inquire at 800-555-1212, or email your
resume to fbnAirlines@cs.com.
FlyByNight Airlines. Now hiring.
We need personell for all disciplines.
Inquire at 800-555-1212, or email your
resume to fbnAirlines@cs.com.
FlyByNight Airlines. Now hiring.
We need personell for all disciplines.
Inquire at 800-555-1212, or email your
resume to fbnAirlines@cs.com.
FlyByNight Airlines. Now hiring.
We need personell for all disciplines.
Inquire at 800-555-1212, or email your
resume to fbnAirlines@cs.com.
FlyByNight Airlines. Now hiring.
We need personell for all disciplines.
Inquire at 800-555-1212, or email your
resume to fbnAirlines@cs.com.
FlyByNight Airlines. Now hiring.
We need personell for all disciplines.
Inquire at 800-555-1212, or email your
resume to fbnAirlines@cs.com.
For Sale
Houseboat, good condition. presently on
Salton Sea. Very few barnacles. 3br,
2ba, two stories, good second home.
Boat House, good condition. presently on
Salton Sea. Very few barnacles. 3br,
2ba, two stories, good second home.
This design experiments
with various ways to achieve
a fluid layout. The premise is the need for multiple
columns, all on the front page. Sort of like a
newsletter, but with the ability to put lots of
text up through the magic of scroll bars (though not
very stylish), this layout demonstrates elastic design
using NO tables and NO frames.
There are 9 columns, col1 - col9, each as a div.
Columns 1 and 3 are required to be fixed width.
All others, 2 and 4 - 9, must be elastic. In other
words, the whole layout must be elastic, capable
of filling the display window whether it be 640x480,
800x600, 1280x1024, or whatever. It looks best at
1280x1024 because at small window sizes a horizontal
scroll bar will appear, and on very large windows,
the lines may be too long to be "aesthetic".
But, that´s due to the choice of the viewer setting
the window size, not the designer.
The layout is organized in rows. Row 1 has columns
1 - 3, row2 has 4 - 5, and
row 3 has 6 - 9. So, every row has some
elastic element in it. But row 1 is special: it has
2 fixed-width divs and one elastic div. To achieve
row1´s special properties, absolute positioning
must be used (IMHO). But, the overall layout should
be done with floats and clears (IMHO), not absolutely
positioned everything.
To meet the requirements, row1 is wrapped in a
"container" div whose rules are position:relative; and
height:260px; . Container must be a positioned element
so its contents can be absolutely positioned inside it
and relative to its origin. But container has no offsets
so it just flows normally into the layout.
Cols 1 - 3 are then positioned absolutely to
give the desired effect.
Partial rules for the 3 columns are:
- position:absolute; width:180px; left:5px; top:10px;
height:270px;
- position:absolute;
top:10px; height:270px; left:198px; right:205px;
- position:absolute; width:180px;
height:270px; top:10px; right:10px;
As can be seen, columns 1 and 3 have fixed widths of 180 pixels.
Col 1 left edge is positioned 5 pixels from the left edge of
container. Col 3 right edge is positioned 10 pixels from the
right edge of container. Column 2 has
no specified width
(it´s an elastic width). Its left edge is 198 pixels
from the left edge of container (making room for column 1).
Its right edge is 205 pixels from the right edge of container
(making room for column 3). These numbers were chosen to
give some room for the gray background to show through between
the columns.
The net effect is that container is now elastic because col2
is elastic. The key point is to
not
specify a width for col2, but to just specify where its
edges should be.
Columns 4 through 9 all have their widths specified as percentages,
thereby making them elastic. Also, columns 4 through 9 are
floated. Col4 and col6 use clear:left to start new rows. Check
the style sheet to see their widths. Using floats and clears
makes changes easier than absolutely positioning all divs. But,
to get fixed widths, position:absolute is required.
Wanted
Need exotic animals for new zoo. Unusual
species preferred. All climates will
be represented.
Need exotic cars for garage. Unusual
species preferred. All styles will
be represented.
Here, column 3,
will probably be used for brief notes about
things relating indirectly to the main message.
This div has a fixed width. Only cols 1 and 3
have fixed widths.
Need exotic computers for a "cloud farm". Unusual
species preferred. All operating systems will
be represented.
Need exotic animals for new zoo. Unusual
species preferred. All climates will
be represented.
Need exotic animals for new zoo. Unusual
species preferred. All climates will
be represented.
Need exotic animals for new zoo. Unusual
species preferred. All climates will
be represented.
Need exotic animals for new zoo. Unusual
species preferred. All climates will
be represented.