Page Layout Using CSS
CSS works best when it is used to specify the visual properties of html
content. It does not do a particularly great job with page layout and seems
to be a bunch of hacks, rather than resting on any elegant principles. Further,
different browsers seem to interpret CSS differently and IE in particular often
requires work arounds. As a result I
actually prefer doing layouts using tables because it works off one principle,
which is nesting of tables.
Nevertheless, CSS is increasingly being used to do page layout.
It is primarily meant to do horizontal layout. If you need to do vertical
alignment of block content, such as centering one element with respect to
another, you probably
need to use tables. At some point you will encounter the vertical-align
attribute and think that it is just what you need. However, it works only
with images in in-line text, not with arbitrary elements. Similarly you will
see hacks for horizontally centering block elements using margin-left
and margin-right. These hacks will not work in the vertical
direction.
Use div instead of table for doing horizontal layout
- CSS does not have the concept of a table.
- You can think of the div element as a cell within a table and
you can then use CSS style instructions to specify the postion of the
div block.
- You can nest div blocks, much as you might nest tables
Types of CSS Layouts
- Fixed width: Designer specifies the width of the page and it will always
be that width, regardless of the resolution of the display. The outermost
block, such as body, will have a width set equal to some number of pixels.
Within the layout you can still use % to apportion screen space among
elements.
- Small displays may not be able to fully display the page and the
user may have to scroll left and right to view it
- Large displays may have white space. The page may either be centered
or left-justified.
- Format will probably get messed up if user increases the
browser's base font size.
- Liquid: Adjusts to the browser's size.
- Content will get re-sized as the browser window increases or
decreases in size.
- Designer can specify that some elements are fixed width. Remaining
varible-sized elements will re-size.
- Lengths are usually specified with % rather than px
- Liquid displays can be quickly converted to a fixed display by
wrapping a fixed with div element around the whole content
of the page.
- Elastic: Fixed-width design with font size flexibility.
- Define page's size with em values
- If user re-defines browser's base font size then all elements of
the page will decrease or increase proportionately
- Ensures that all elements retain their relative size and position
- If browser window is resized to be bigger than the fixed width of
the design, the content will not expand to fill the extra space (it
will be left-justified or centered depending on the browser and there
will be some type of background color that fills the empty space).
However, if the user changes the base font size and there is additional
room into which the content can expand, then it will. For example,
if the fixed width is 750 pixels and the browser window is 1000
pixels, then the content can expand by up to 250 pixels to accommodate
bigger font sizes.
Floating Versus Absolute Positioning
Orthogonal to the issue of whether you used a fixed or liquid display is
whether you specify the position of an element or give the browser a general
direction about where you wish it to appear:
- floating layout: the float property gives the browser
general directives about where to place elements (e.g, left or right but
not top/bottom because CSS is only set-up to do horizontal layout)
but leaves it up to the browser to assign absolute positions
- absolute positioning layout: the position property
tells the browser exactly where to position an element.
The position property defines the following values:
- fixed: The position of the element is absolutely fixed in the browser window and
will stay there, even if you scroll down. Good for content that should always
appear in a window, such as a navigation bar or faux frames.
- absolute: Sets an absolute location relative to your parent element. You will
be ignored in the page layout calculations and you will not leave a big
gaping hole in the layout.
- relative: Like absolute except that you will be included in the page layout
calculations and you will leave a "hole" where you should have been positioned if
relative were not used. relative is typically used to re-set a location in preparation
for the use of absolute.
Float Layout Basics
- Use the float property to float an element
- Moves the element to one side of the page. Any html that appears
below the floated element moves up on the page and wraps around
the float.
- Values are left, right, and none
- floated elements should typically have a width property.
- Example:
#sidebar {
float: left;
width: 170px;
}
- Pg. 283 of CSS: The Missing Manual,
Fig 11-4 shows a nice example of html source order and CSS
page layout
- Wrap columns in div's in order to float them
- Add margins for main content: if two columns are not the same height, then
content from one may flow under the other.
- Add a left margin or right margin to the main column to ensure that
any excess content does not flow under the sidebar.
- The margin should be a few pixels wider than the width of the sidebar,
in order to create a whitespace "gutter" of a few pixels
- Example:
.main {
margin-left: 180px;
}
- Do not use a width for the main column. It should use any space that the
remaining columns do not consume.
- Since column heights are often unequal, you may need to use a hack
to get the background color for a column to extend all the way to the
bottom of the page. You can do this by creating an image with the
desired color, then load it using the background-image property and
set the background-repeat property to repeat-y.
- Sometimes you will wrap columns within columns to achieve desired
effects, such as temporarily splitting a column into two columns.
- Float drops: If the width of a page becomes too small to accommodate all
the floating columns, then the rightmost column will get dropped. Float
drops can be partially avoided by not trying to use every last pixel on
the page. There are enough rounding errors using %'s and differences among
the browsers that you will often get a float drop if you try to use 100%
of the page. You may not be able to prevent float drops if you specify
that some columns have fixed pixel widths and use a liquid design, because
those columns will always want to have those widths, even if the page
width becomes smaller than the column width.
- Clearing floats: Sometimes you do not want the content that follows
a floated element in an html file to be wrapped around it. In that
case you can specify the clear property in the succeeding element.
The values for clear are left, right, and both.
Specifying left will cause an element's contents to drop below a left
floated element, specifying right will cause an element's contents to
drop below a right floated element, and specifying both will ensure that
the element drops below all floated elements that precede it.
Absolute Positioning
- When you specify absolute positioning via the position attribute,
you should also specify the position of the element using the left,
right, top, and bottom elements.
- If you specify both left/right or top/bottom, then you are implicitly
also specifying the width/height of the element. You can also
control its location and size by specifying just one of left or right
and a width, or one of top or bottom and a height. IE 6.0 and earlier
has issues to
bottom and right so you're often better off just using top and left.
- It is okay to specify negative values for the location properties, in
which case you will "pop" outside its enclosing box.
- Overlapped objects and the z-index property: When you
float elements, the browser will ensure that they never overlap.
When you specify the position of an element, it is possible that that
element will overlap another element.
- Normally the stacking order of elements is determined by their
position in the source html file, with later occurring elements
stacked on top of earlier occurring elements.
- You can change the stacking order of elements using
the z-index property. Elements with larger z-index
values will appear on top of elements with lower z-index values.
- The z-index property only works with absolutely positioned elements
(i.e., elements that use the position property).
- Floating elements have an implicit z-index value of 0, so negative
z-index values place absolutely positioned elements beneath floating
elements and 0 or greater values place them above floating elements,
irrespective of their position in the file.
- Example: Consider the following specification and content:
This is a heading
Because the image has a z-index of -1, it will be placed behind the text.
Note how the image is placed between two floating elements and that
it overlaps both floating elements. Setting its z-index to a negative
value causes the image to appear under the floating elements and
setting the z-index to a positive value causes the image to appear
above the floating elements. Specifically setting the z-index of
the image to 0 still causes it to cover both floating elements, despite
the fact that it appears before one and after the other in the html
source.