CSS layout I
Derek Bridge
Department of Computer Science,
University College Cork
CSS layout I
Aims:
- to learn the difference between fixed-width, elastic and liquid layouts
- to learn how to use CSS to achieve a two-column, fixed-width layout
- to learn how to use CSS to achieve a three-column, fixed-width layout
Single column layout - centred
- Consider a page with a
header, a div with id="main", and a footer:
- We need to set their width if we are to center them
- Three options
- fixed-width layout
- elastic layout
- liquid layout
Single column layout - centred - fixed-width
Single column layout - centred - elastic
Single column layout - centred - liquid
Multi-column layout
- Multi-column layout (e.g. two or three columns) is very popular
- Older web sites use tables for layout: don't!
- Newer web sites use either CSS positioning properties or floating (becoming the more popular)
- Common layouts are
- two- (or three-) column, fixed-width layout
- two- (or three-) column, liquid layout
Floating an image
- Consider, e.g.:
img
{
float: left;
}
- This moves the image to the left edge of its container, with other
content moving up to occupy space to the right
- This relies on the floated element being narrower than its container — otherwise there'll be no space to the right
- You can stop the next element from moving up, i.e. so it appears below the
floated element
- E.g. if the next element has
id="next":
#next
{
clear: left;
}
- You could float a logo so that an
hgroup appears alongside it in a header
Two-column layout - fixed-width
- Make sure the HTML source is in a logical order:
nav before #main, or #main before nav?
- This helps visitors who are not seeing the effects of the CSS. Who in particular?
- If
nav before #main, then float nav left and let #main move up
- If
#main before nav, then float #main right and let nav move up
- In either case, force the
footer to sit below by clearing floats
- But, if non-floated is longer than floated, non-floated will wrap under floated: so set a margin on non-floated —on the same side and of
the same width as the floated
Two-column layout - fixed-width
Here's the CSS assuming nav comes before #main:
nav
{
float: left;
width: 152px;
}
#main
{
margin-left: 152px;
}
footer
{
clear: both;
}
You can increase #main's left margin to give a gap between the two columns.
Two-column layout - centred - fixed-width
Three-column layout - centred - fixed-width
- Make sure the HTML source is in a logical order
- Keep in mind: the one that comes last is the one that moves up
- E.g. assume
nav, then #main, then aside is the logical order
- Float the
nav left; float #main left; let the aside move up
- (Alternatively, floating all three left works — esp. for fixed-width layouts)
- E.g. assume
nav, then aside, then #main is the logical order
- Float the
nav left; float the aside right; let #main move up
- E.g. assume
#main, then nav, then aside is the logical order
- Problem!
- Put another
div around #main and nav; float this new div left; let the aside
move up; and float #main right; and remember margins on non-floateds
- Or: read-up on approaches that use negative margins
- Clear floats from the footer, as before
- Set margins on non-floated content, as before
- Centre the wrapper
div, as before
Three-column layout - centred - fixed-width
Assuming nav, then #main, then aside is the logical order
#wrapper
{
margin-left: auto;
margin-right: auto;
width: 760px;
}
nav
{
float: left;
width: 152px;
}
#main
{
float: left;
width: 418px;
}
aside
{
margin-left: 570px;
}
footer
{
clear: both;
}